mxClient

Bootstrapping mechanism for the mxGraph thin client. The production version of this file contains all code required to run the mxGraph thin client, as well as global constants to identify the browser and operating system in use. You may have to load chrome://global/content/contentAreaUtils.js in your page to disable certain security restrictions in Mozilla.

Summary

mxClient	Bootstrapping mechanism for the mxGraph thin client.
Variables
VERSION	Contains the current version of the mxGraph library.
IS_IE	True if the current browser is Internet Explorer 10 or below.
IS_IE6	True if the current browser is Internet Explorer 6.x.
IS_IE11	True if the current browser is Internet Explorer 11.x.
IS_EDGE	True if the current browser is Microsoft Edge.
IS_QUIRKS	True if the current browser is Internet Explorer and it is in quirks mode.
IS_EM	True if the browser is IE11 in enterprise mode (IE8 standards mode).
VML_PREFIX	Prefix for VML namespace in node names.
OFFICE_PREFIX	Prefix for VML office namespace in node names.
IS_NS	True if the current browser is Netscape (including Firefox).
IS_OP	True if the current browser is Opera.
IS_OT	True if -o-transform is available as a CSS style, ie for Opera browsers based on a Presto engine with version 2.5 or later.
IS_SF	True if the current browser is Safari.
IS_IOS	Returns true if the user agent is an iPad, iPhone or iPod.
IS_GC	True if the current browser is Google Chrome.
IS_CHROMEAPP	True if the this is running inside a Chrome App.
IS_FF	True if the current browser is Firefox.
IS_MT	True if -moz-transform is available as a CSS style.
IS_VML	True if the browser supports VML.
IS_SVG	True if the browser supports SVG.
NO_FO	True if foreignObject support is not available.
IS_WIN	True if the client is a Windows.
IS_MAC	True if the client is a Mac.
IS_CHROMEOS	True if the client is a Chrome OS.
IS_TOUCH	True if this device supports touchstart/-move/-end events (Apple iOS, Android, Chromebook and Chrome Browser on touch-enabled devices).
IS_POINTER	True if this device supports Microsoft pointer events (always false on Macs).
IS_LOCAL	True if the documents location does not start with http:// or https://.
defaultBundles	Contains the base names of the default bundles if mxLoadResources is false.
Functions
isBrowserSupported	Returns true if the current browser is supported, that is, if mxClient.IS_VML or mxClient.IS_SVG is true.
link	Adds a link node to the head of the document.
loadResources	Helper method to load the default bundles if mxLoadResources is false.
include	Dynamically adds a script node to the document header.
Variables
mxLoadResources	Optional global config variable to toggle loading of the two resource files in mxGraph and mxEditor.
mxForceIncludes	Optional global config variable to force loading the JavaScript files in development mode.
mxResourceExtension	Optional global config variable to specify the extension of resource files.
mxLoadStylesheets	Optional global config variable to toggle loading of the CSS files when the library is initialized.
basePath	Basepath for all URLs in the core without trailing slash.
imageBasePath	Basepath for all images URLs in the core without trailing slash.
language	Defines the language of the client, eg.
defaultLanguage	Defines the default language which is used in the common resource files.
languages	Defines the optional array of all supported language extensions.
mxLog	A singleton class that implements a simple console.
Variables
consoleName	Specifies the name of the console window.
TRACE	Specified if the output for enter and leave should be visible in the console.
DEBUG	Specifies if the output for debug should be visible in the console.
WARN	Specifies if the output for warn should be visible in the console.
buffer	Buffer for pre-initialized content.
Functions
init	Initializes the DOM node for the console.
info	Writes the current navigator information to the console.
addButton	Adds a button to the console using the given label and function.
isVisible	Returns true if the console is visible.
show	Shows the console.
setVisible	Shows or hides the console.
enter	Writes the specified string to the console if TRACE is true and returns the current time in milliseconds.
leave	Writes the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.
debug	Adds all arguments to the console if DEBUG is enabled.
warn	Adds all arguments to the console if WARN is enabled.
write	Adds the specified strings to the console.
writeln	Adds the specified strings to the console, appending a linefeed at the end of each string.
mxObjectIdentity	Identity for JavaScript objects and functions.
Variables
FIELD_NAME	Name of the field to be used to store the object ID.
counter	Current counter.
Functions
get	Returns the ID for the given object or function or null if no object is specified.
clear	Deletes the ID from the given object or function.
mxDictionary	A wrapper class for an associative array with object keys.
Functions
mxEventSource	Constructs a new dictionary which allows object to be used as keys.
map	Stores the (key, value) pairs in this dictionary.
clear	Clears the dictionary.
get	Returns the value for the given key.
put	Stores the value under the given key and returns the previous value for that key.
remove	Removes the value for the given key and returns the value that has been removed.
getKeys	Returns all keys as an array.
getValues	Returns all values as an array.
visit	Visits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.
mxResources	Implements internationalization.
Variables
resources	Object that maps from keys to values.
extension	Specifies the extension used for language files.
resourcesEncoded	Specifies whether or not values in resource files are encoded with \u or percentage.
loadDefaultBundle	Specifies if the default file for a given basename should be loaded.
loadDefaultBundle	Specifies if the specific language file file for a given basename should be loaded.
Functions
isLanguageSupported	Hook for subclassers to disable support for a given language.
getDefaultBundle	Hook for subclassers to return the URL for the special bundle.
getSpecialBundle	Hook for subclassers to return the URL for the special bundle.
add	Adds the default and current language properties file for the specified basename.
parse	Parses the key, value pairs in the specified text and stores them as local resources.
get	Returns the value for the specified resource key.
replacePlaceholders	Replaces the given placeholders with the given parameters.
loadResources	Loads all required resources asynchronously.
mxPoint	Implements a 2-dimensional vector with double precision coordinates.
Functions
mxPoint	Constructs a new point for the optional x and y coordinates.
Variables
x	Holds the x-coordinate of the point.
y	Holds the y-coordinate of the point.
Functions
equals	Returns true if the given object equals this point.
clone	Returns a clone of this mxPoint.
mxRectangle	Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
Functions
mxRectangle	Constructs a new rectangle for the optional parameters.
Variables
width	Holds the width of the rectangle.
height	Holds the height of the rectangle.
Functions
setRect	Sets this rectangle to the specified values
getCenterX	Returns the x-coordinate of the center point.
getCenterY	Returns the y-coordinate of the center point.
add	Adds the given rectangle to this rectangle.
intersect	Changes this rectangle to where it overlaps with the given rectangle.
grow	Grows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.
getPoint	Returns the top, left corner as a new mxPoint.
rotate90	Rotates this rectangle by 90 degree around its center point.
equals	Returns true if the given object equals this rectangle.
fromRectangle	Returns a new mxRectangle which is a copy of the given rectangle.
mxEffects	Provides animation effects.
Functions
animateChanges	Asynchronous animated move operation.
cascadeOpacity	Sets the opacity on the given cell and its descendants.
fadeOut	Asynchronous fade-out operation.
mxUtils	A singleton class that provides cross-browser helper methods.
Variables
errorResource	Specifies the resource key for the title of the error window.
closeResource	Specifies the resource key for the label of the close button.
errorImage	Defines the image used for error dialogs.
Functions
removeCursors	Removes the cursors from the style of the given DOM node and its descendants.
getCurrentStyle	Returns the current style of the specified element.
parseCssNumber	Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
setPrefixedStyle	Adds the given style with the standard name and an optional vendor prefix for the current browser.
hasScrollbars	Returns true if the overflow CSS property of the given node is either scroll or auto.
bind	Returns a wrapper function that locks the execution scope of the given function to the specified scope.
eval	Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.
findNode	Returns the first node where attr equals value.
getFunctionName	Returns the name for the given function.
indexOf	Returns the index of obj in array or -1 if the array does not contain the given object.
forEach	Calls the given function for each element of the given array and returns the array.
remove	Removes all occurrences of the given object in the given array or object.
isNode	Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isAncestorNode	Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.
getChildNodes	Returns an array of child nodes that are of the given node type.
importNode	Cross browser implementation for document.importNode.
createXmlDocument	Returns a new, empty XML document.
parseXml	Parses the specified XML string into a new XML document and returns the new document.
clearSelection	Clears the current selection in the page.
getPrettyXML	Returns a pretty printed string that represents the XML tree for the given node.
removeWhitespace	Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
htmlEntities	Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
isVml	Returns true if the given node is in the VML namespace.
getXml	Returns the XML content of the specified node.
extractTextWithWhitespace	Returns the text content of the specified node.
replaceTrailingNewlines	Replaces each trailing newline with the given pattern.
getTextContent	Returns the text content of the specified node.
setTextContent	Sets the text content of the specified node.
getInnerHtml	Returns the inner HTML for the given node as a string or an empty string if no node was specified.
getOuterHtml	Returns the outer HTML for the given node as a string or an empty string if no node was specified.
write	Creates a text node for the given string and appends it to the given parent.
writeln	Creates a text node for the given string and appends it to the given parent with an additional linefeed.
br	Appends a linebreak to the given parent and returns the linebreak.
button	Returns a new button with the given level and function as an onclick event handler.
para	Appends a new paragraph with the given text to the specified parent and returns the paragraph.
addTransparentBackgroundFilter	Adds a transparent background to the filter of the given node.
linkAction	Adds a hyperlink to the specified parent that invokes action on the specified editor.
linkInvoke	Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
link	Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.
getDocumentSize	Returns the client size for the current document as an mxRectangle.
fit	Makes sure the given node is inside the visible area of the window.
load	Loads the specified URL synchronously and returns the mxXmlRequest.
get	Loads the specified URL asynchronously and invokes the given functions depending on the request status.
getAll	Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
post	Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
submit	Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
loadInto	Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
getValue	Returns the value for the given key in the given associative array or the given default value if the value is null.
getNumber	Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.
getColor	Returns the color value for the given key in the given associative array or the given default value if the value is null.
clone	Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
equalPoints	Compares all mxPoints in the given lists.
equalEntries	Returns true if all properties of the given objects are equal.
removeDuplicates	Removes all duplicates from the given array.
isNaN	Returns true if the given value is of type number and isNaN returns true.
extend	Assigns a copy of the superclass prototype to the subclass prototype.
toString	Returns a textual representation of the specified object.
toRadians	Converts the given degree to radians.
toDegree	Converts the given radians to degree.
arcToCurves	Converts the given arc to a series of curves.
getBoundingBox	Returns the bounding box for the rotated rectangle.
getRotatedPoint	Rotates the given point by the given cos and sin.
reversePortConstraints	Reverse the port constraint bitmask.
findNearestSegment	Finds the index of the nearest segment on the given cell state for the specified coordinate pair.
getDirectedBounds	Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getPerimeterPoint	Returns the intersection between the polygon defined by the array of points and the line between center and point.
rectangleIntersectsSegment	Returns true if the given rectangle intersects the given segment.
contains	Returns true if the specified point (x, y) is contained in the given rectangle.
intersects	Returns true if the two rectangles intersect.
intersects	Returns true if the two rectangles intersect.
getOffset	Returns the offset for the specified container as an mxPoint.
getDocumentScrollOrigin	Returns the scroll origin of the given document or the current document if no document is given.
getScrollOrigin	Returns the top, left corner of the viewrect as an mxPoint.
convertPoint	Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
ltrim	Strips all whitespaces from the beginning of the string.
rtrim	Strips all whitespaces from the end of the string.
trim	Strips all whitespaces from both end of the string.
isNumeric	Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.
isInteger	Returns true if the given value is an valid integer number.
mod	Returns the remainder of division of n by m.
intersection	Returns the intersection of two lines as an mxPoint.
ptSegDistSq	Returns the square distance between a segment and a point.
ptLineDist	Returns the distance between a line defined by two points and a point.
relativeCcw	Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.
animateChanges	See mxEffects.animateChanges.
cascadeOpacity	See mxEffects.cascadeOpacity.
fadeOut	See mxEffects.fadeOut.
setOpacity	Sets the opacity of the specified DOM node to the given value in %.
createImage	Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
sortCells	Sorts the given cells according to the order in the cell hierarchy.
getStylename	Returns the stylename in a style of the form [(stylename\|key=value);] or an empty string if the given style does not contain a stylename.
getStylenames	Returns the stylenames in a style of the form [(stylename\|key=value);] or an empty array if the given style does not contain any stylenames.
indexOfStylename	Returns the index of the given stylename in the given style.
addStylename	Adds the specified stylename to the given style if it does not already contain the stylename.
removeStylename	Removes all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenames	Removes all stylenames from the given style and returns the updated style.
setCellStyles	Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.
setStyle	Adds or removes the given key, value pair to the style and returns the new style.
setCellStyleFlags	Sets or toggles the flag bit for the given key in the cell’s styles.
setStyleFlag	Sets or removes the given key from the specified style and returns the new style.
getAlignmentAsPoint	Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getSizeForString	Returns an mxRectangle with the size (width and height in pixels) of the given string.
getViewXml
getScaleForPageCount	Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
show	Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
printScreen	Prints the specified graph using a new window and the built-in print dialog.
popup	Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
alert	Displayss the given alert in a new dialog.
prompt	Displays the given message in a prompt dialog.
confirm	Displays the given message in a confirm dialog.
error	Displays the given error message in a new mxWindow of the given width.
makeDraggable	Configures the given DOM element to act as a drag source for the specified graph.
mxConstants	Defines various global constants.
Variables
DEFAULT_HOTSPOT	Defines the portion of the cell which is to be used as a connectable region.
MIN_HOTSPOT_SIZE	Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
MAX_HOTSPOT_SIZE	Defines the maximum size in pixels of the portion of the cell which is to be used as a connectable region.
RENDERING_HINT_EXACT	Defines the exact rendering hint.
RENDERING_HINT_FASTER	Defines the faster rendering hint.
RENDERING_HINT_FASTEST	Defines the fastest rendering hint.
DIALECT_SVG	Defines the SVG display dialect name.
DIALECT_VML	Defines the VML display dialect name.
DIALECT_MIXEDHTML	Defines the mixed HTML display dialect name.
DIALECT_PREFERHTML	Defines the preferred HTML display dialect name.
DIALECT_STRICTHTML	Defines the strict HTML display dialect.
NS_SVG	Defines the SVG namespace.
NS_XHTML	Defines the XHTML namespace.
NS_XLINK	Defines the XLink namespace.
SHADOWCOLOR	Defines the color to be used to draw shadows in shapes and windows.
VML_SHADOWCOLOR	Used for shadow color in filters where transparency is not supported (Microsoft Internet Explorer).
SHADOW_OFFSET_X	Specifies the x-offset of the shadow.
SHADOW_OFFSET_Y	Specifies the y-offset of the shadow.
SHADOW_OPACITY	Defines the opacity for shadows.
NODETYPE_ELEMENT	DOM node of type ELEMENT.
NODETYPE_ATTRIBUTE	DOM node of type ATTRIBUTE.
NODETYPE_TEXT	DOM node of type TEXT.
NODETYPE_CDATA	DOM node of type CDATA.
NODETYPE_ENTITY_REFERENCE	DOM node of type ENTITY_REFERENCE.
NODETYPE_ENTITY	DOM node of type ENTITY.
NODETYPE_PROCESSING_INSTRUCTION	DOM node of type PROCESSING_INSTRUCTION.
NODETYPE_COMMENT	DOM node of type COMMENT.
NODETYPE_DOCUMENT	DOM node of type DOCUMENT.
NODETYPE_DOCUMENTTYPE	DOM node of type DOCUMENTTYPE.
NODETYPE_DOCUMENT_FRAGMENT	DOM node of type DOCUMENT_FRAGMENT.
NODETYPE_NOTATION	DOM node of type NOTATION.
TOOLTIP_VERTICAL_OFFSET	Defines the vertical offset for the tooltip.
DEFAULT_VALID_COLOR	Specifies the default valid color.
DEFAULT_INVALID_COLOR	Specifies the default invalid color.
OUTLINE_HIGHLIGHT_COLOR	Specifies the default highlight color for shape outlines.
OUTLINE_HIGHLIGHT_COLOR	Defines the strokewidth to be used for shape outlines.
HIGHLIGHT_STROKEWIDTH	Defines the strokewidth to be used for the highlights.
CONSTRAINT_HIGHLIGHT_SIZE	Size of the constraint highlight (in px).
HIGHLIGHT_OPACITY	Opacity (in %) used for the highlights (including outline).
CURSOR_MOVABLE_VERTEX	Defines the cursor for a movable vertex.
CURSOR_MOVABLE_EDGE	Defines the cursor for a movable edge.
CURSOR_LABEL_HANDLE	Defines the cursor for a movable label.
CURSOR_TERMINAL_HANDLE	Defines the cursor for a terminal handle.
CURSOR_BEND_HANDLE	Defines the cursor for a movable bend.
CURSOR_VIRTUAL_BEND_HANDLE	Defines the cursor for a movable bend.
CURSOR_CONNECT	Defines the cursor for a connectable state.
HIGHLIGHT_COLOR	Defines the color to be used for the cell highlighting.
TARGET_HIGHLIGHT_COLOR	Defines the color to be used for highlighting a target cell for a new or changed connection.
INVALID_CONNECT_TARGET_COLOR	Defines the color to be used for highlighting a invalid target cells for a new or changed connections.
DROP_TARGET_COLOR	Defines the color to be used for the highlighting target parent cells (for drag and drop).
VALID_COLOR	Defines the color to be used for the coloring valid connection previews.
INVALID_COLOR	Defines the color to be used for the coloring invalid connection previews.
EDGE_SELECTION_COLOR	Defines the color to be used for the selection border of edges.
VERTEX_SELECTION_COLOR	Defines the color to be used for the selection border of vertices.
VERTEX_SELECTION_STROKEWIDTH	Defines the strokewidth to be used for vertex selections.
EDGE_SELECTION_STROKEWIDTH	Defines the strokewidth to be used for edge selections.
SELECTION_DASHED	Defines the dashed state to be used for the vertex selection border.
SELECTION_DASHED	Defines the dashed state to be used for the edge selection border.
GUIDE_COLOR	Defines the color to be used for the guidelines in mxGraphHandler.
GUIDE_STROKEWIDTH	Defines the strokewidth to be used for the guidelines in mxGraphHandler.
OUTLINE_COLOR	Defines the color to be used for the outline rectangle border.
OUTLINE_STROKEWIDTH	Defines the strokewidth to be used for the outline rectangle stroke width.
HANDLE_SIZE	Defines the default size for handles.
LABEL_HANDLE_SIZE	Defines the default size for label handles.
HANDLE_FILLCOLOR	Defines the color to be used for the handle fill color.
HANDLE_STROKECOLOR	Defines the color to be used for the handle stroke color.
LABEL_HANDLE_FILLCOLOR	Defines the color to be used for the label handle fill color.
CONNECT_HANDLE_FILLCOLOR	Defines the color to be used for the connect handle fill color.
LOCKED_HANDLE_FILLCOLOR	Defines the color to be used for the locked handle fill color.
OUTLINE_HANDLE_FILLCOLOR	Defines the color to be used for the outline sizer fill color.
OUTLINE_HANDLE_STROKECOLOR	Defines the color to be used for the outline sizer stroke color.
DEFAULT_FONTFAMILY	Defines the default family for all fonts.
DEFAULT_FONTSIZE	Defines the default size (in px).
DEFAULT_TEXT_DIRECTION	Defines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.
LINE_HEIGHT	Defines the default line height for text labels.
WORD_WRAP	Defines the CSS value for the word-wrap property.
ABSOLUTE_LINE_HEIGHT	Specifies if absolute line heights should be used (px) in CSS.
DEFAULT_FONTSTYLE	Defines the default style for all fonts.
DEFAULT_STARTSIZE	Defines the default start size for swimlanes.
DEFAULT_MARKERSIZE	Defines the default size for all markers.
DEFAULT_IMAGESIZE	Defines the default width and height for images used in the label shape.
ENTITY_SEGMENT	Defines the length of the horizontal segment of an Entity Relation.
RECTANGLE_ROUNDING_FACTOR	Defines the rounding factor for rounded rectangles in percent between 0 and 1.
LINE_ARCSIZE	Defines the size of the arcs for rounded edges.
ARROW_SPACING	Defines the spacing between the arrow shape and its terminals.
ARROW_WIDTH	Defines the width of the arrow shape.
ARROW_SIZE	Defines the size of the arrowhead in the arrow shape.
PAGE_FORMAT_A4_PORTRAIT	Defines the rectangle for the A4 portrait page format.
PAGE_FORMAT_A4_PORTRAIT	Defines the rectangle for the A4 portrait page format.
PAGE_FORMAT_LETTER_PORTRAIT	Defines the rectangle for the Letter portrait page format.
PAGE_FORMAT_LETTER_PORTRAIT	Defines the rectangle for the Letter portrait page format.
NONE	Defines the value for none.
STYLE_PERIMETER	Defines the key for the perimeter style.
STYLE_SOURCE_PORT	Defines the ID of the cell that should be used for computing the perimeter point of the source for an edge.
STYLE_TARGET_PORT	Defines the ID of the cell that should be used for computing the perimeter point of the target for an edge.
STYLE_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to cells in.
STYLE_PORT_CONSTRAINT_ROTATION	Define whether port constraint directions are rotated with vertex rotation.
STYLE_SOURCE_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to sources in.
STYLE_TARGET_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to targets in.
STYLE_OPACITY	Defines the key for the opacity style.
STYLE_FILL_OPACITY	Defines the key for the fill opacity style.
STYLE_STROKE_OPACITY	Defines the key for the stroke opacity style.
STYLE_TEXT_OPACITY	Defines the key for the text opacity style.
STYLE_TEXT_DIRECTION	Defines the key for the text direction style.
STYLE_OVERFLOW	Defines the key for the overflow style.
STYLE_ORTHOGONAL	Defines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.
STYLE_EXIT_X	Defines the key for the horizontal relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_Y	Defines the key for the vertical relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_DX	Defines the key for the horizontal offset of the connection point of an edge with its source terminal.
STYLE_EXIT_DY	Defines the key for the vertical offset of the connection point of an edge with its source terminal.
STYLE_EXIT_PERIMETER	Defines if the perimeter should be used to find the exact entry point along the perimeter of the source.
STYLE_ENTRY_X	Defines the key for the horizontal relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_Y	Defines the key for the vertical relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_DX	Defines the key for the horizontal offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_DY	Defines the key for the vertical offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_PERIMETER	Defines if the perimeter should be used to find the exact entry point along the perimeter of the target.
STYLE_WHITE_SPACE	Defines the key for the white-space style.
STYLE_ROTATION	Defines the key for the rotation style.
STYLE_FILLCOLOR	Defines the key for the fill color.
STYLE_POINTER_EVENTS	Specifies if pointer events should be fired on transparent backgrounds.
STYLE_SWIMLANE_FILLCOLOR	Defines the key for the fill color of the swimlane background.
STYLE_MARGIN	Defines the key for the margin between the ellipses in the double ellipse shape.
STYLE_GRADIENTCOLOR	Defines the key for the gradient color.
STYLE_GRADIENT_DIRECTION	Defines the key for the gradient direction.
STYLE_STROKECOLOR	Defines the key for the strokeColor style.
STYLE_SEPARATORCOLOR	Defines the key for the separatorColor style.
STYLE_STROKEWIDTH	Defines the key for the strokeWidth style.
STYLE_ALIGN	Defines the key for the align style.
STYLE_VERTICAL_ALIGN	Defines the key for the verticalAlign style.
STYLE_LABEL_WIDTH	Defines the key for the width of the label if the label position is not center.
STYLE_LABEL_POSITION	Defines the key for the horizontal label position of vertices.
STYLE_VERTICAL_LABEL_POSITION	Defines the key for the vertical label position of vertices.
STYLE_IMAGE_ASPECT	Defines the key for the image aspect style.
STYLE_IMAGE_ALIGN	Defines the key for the align style.
STYLE_IMAGE_VERTICAL_ALIGN	Defines the key for the verticalAlign style.
STYLE_GLASS	Defines the key for the glass style.
STYLE_IMAGE	Defines the key for the image style.
STYLE_IMAGE_WIDTH	Defines the key for the imageWidth style.
STYLE_IMAGE_HEIGHT	Defines the key for the imageHeight style.
STYLE_IMAGE_BACKGROUND	Defines the key for the image background color.
STYLE_IMAGE_BORDER	Defines the key for the image border color.
STYLE_FLIPH	Defines the key for the horizontal image flip.
STYLE_FLIPV	Defines the key for the vertical flip.
STYLE_NOLABEL	Defines the key for the noLabel style.
STYLE_NOEDGESTYLE	Defines the key for the noEdgeStyle style.
STYLE_LABEL_BACKGROUNDCOLOR	Defines the key for the label background color.
STYLE_LABEL_BORDERCOLOR	Defines the key for the label border color.
STYLE_LABEL_PADDING	Defines the key for the label padding, ie.
STYLE_INDICATOR_SHAPE	Defines the key for the indicator shape used within an mxLabel.
STYLE_INDICATOR_IMAGE	Defines the key for the indicator image used within an mxLabel.
STYLE_INDICATOR_COLOR	Defines the key for the indicatorColor style.
STYLE_INDICATOR_STROKECOLOR	Defines the key for the indicator stroke color in mxLabel.
STYLE_INDICATOR_GRADIENTCOLOR	Defines the key for the indicatorGradientColor style.
STYLE_INDICATOR_SPACING	The defines the key for the spacing between the label and the indicator in mxLabel.
STYLE_INDICATOR_WIDTH	Defines the key for the indicator width.
STYLE_INDICATOR_HEIGHT	Defines the key for the indicator height.
STYLE_INDICATOR_DIRECTION	Defines the key for the indicatorDirection style.
STYLE_SHADOW	Defines the key for the shadow style.
STYLE_SEGMENT	Defines the key for the segment style.
STYLE_ENDARROW	Defines the key for the end arrow marker.
STYLE_STARTARROW	Defines the key for the start arrow marker.
STYLE_ENDSIZE	Defines the key for the endSize style.
STYLE_STARTSIZE	Defines the key for the startSize style.
STYLE_SWIMLANE_LINE	Defines the key for the swimlaneLine style.
STYLE_ENDFILL	Defines the key for the endFill style.
STYLE_STARTFILL	Defines the key for the startFill style.
STYLE_DASHED	Defines the key for the dashed style.
STYLE_FIX_DASH	Defines the key for the fixDash style.
STYLE_ROUNDED	Defines the key for the rounded style.
STYLE_CURVED	Defines the key for the curved style.
STYLE_ARCSIZE	Defines the rounding factor for a rounded rectangle in percent (without the percent sign).
STYLE_ABSOLUTE_ARCSIZE	Defines the key for the absolute arc size style.
STYLE_SOURCE_PERIMETER_SPACING	Defines the key for the source perimeter spacing.
STYLE_TARGET_PERIMETER_SPACING	Defines the key for the target perimeter spacing.
STYLE_PERIMETER_SPACING	Defines the key for the perimeter spacing.
STYLE_SPACING	Defines the key for the spacing.
STYLE_SPACING_TOP	Defines the key for the spacingTop style.
STYLE_SPACING_LEFT	Defines the key for the spacingLeft style.
STYLE_SPACING_BOTTOM	Defines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only).
STYLE_SPACING_RIGHT	Defines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only).
STYLE_HORIZONTAL	Defines the key for the horizontal style.
STYLE_DIRECTION	Defines the key for the direction style.
STYLE_ANCHOR_POINT_DIRECTION	Defines the key for the anchorPointDirection style.
STYLE_ELBOW	Defines the key for the elbow style.
STYLE_FONTCOLOR	Defines the key for the fontColor style.
STYLE_FONTFAMILY	Defines the key for the fontFamily style.
STYLE_FONTSIZE	Defines the key for the fontSize style (in px).
STYLE_FONTSTYLE	Defines the key for the fontStyle style.
STYLE_ASPECT	Defines the key for the aspect style.
STYLE_AUTOSIZE	Defines the key for the autosize style.
STYLE_FOLDABLE	Defines the key for the foldable style.
STYLE_EDITABLE	Defines the key for the editable style.
STYLE_BACKGROUND_OUTLINE	Defines the key for the backgroundOutline style.
STYLE_BENDABLE	Defines the key for the bendable style.
STYLE_MOVABLE	Defines the key for the movable style.
STYLE_RESIZABLE	Defines the key for the resizable style.
STYLE_RESIZE_WIDTH	Defines the key for the resizeWidth style.
STYLE_RESIZE_WIDTH	Defines the key for the resizeHeight style.
STYLE_ROTATABLE	Defines the key for the rotatable style.
STYLE_CLONEABLE	Defines the key for the cloneable style.
STYLE_DELETABLE	Defines the key for the deletable style.
STYLE_SHAPE	Defines the key for the shape.
STYLE_EDGE	Defines the key for the edge style.
STYLE_JETTY_SIZE	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_SOURCE_JETTY_SIZE	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
targetJettySize	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_LOOP	Defines the key for the loop style.
STYLE_ORTHOGONAL_LOOP	Defines the key for the orthogonal loop style.
STYLE_ROUTING_CENTER_X	Defines the key for the horizontal routing center.
STYLE_ROUTING_CENTER_Y	Defines the key for the vertical routing center.
FONT_BOLD	Constant for bold fonts.
FONT_ITALIC	Constant for italic fonts.
FONT_UNDERLINE	Constant for underlined fonts.
SHAPE_RECTANGLE	Name under which mxRectangleShape is registered in mxCellRenderer.
SHAPE_ELLIPSE	Name under which mxEllipse is registered in mxCellRenderer.
SHAPE_DOUBLE_ELLIPSE	Name under which mxDoubleEllipse is registered in mxCellRenderer.
SHAPE_RHOMBUS	Name under which mxRhombus is registered in mxCellRenderer.
SHAPE_LINE	Name under which mxLine is registered in mxCellRenderer.
SHAPE_IMAGE	Name under which mxImageShape is registered in mxCellRenderer.
SHAPE_ARROW	Name under which mxArrow is registered in mxCellRenderer.
SHAPE_ARROW_CONNECTOR	Name under which mxArrowConnector is registered in mxCellRenderer.
SHAPE_LABEL	Name under which mxLabel is registered in mxCellRenderer.
SHAPE_CYLINDER	Name under which mxCylinder is registered in mxCellRenderer.
SHAPE_SWIMLANE	Name under which mxSwimlane is registered in mxCellRenderer.
SHAPE_CONNECTOR	Name under which mxConnector is registered in mxCellRenderer.
SHAPE_ACTOR	Name under which mxActor is registered in mxCellRenderer.
SHAPE_CLOUD	Name under which mxCloud is registered in mxCellRenderer.
SHAPE_TRIANGLE	Name under which mxTriangle is registered in mxCellRenderer.
SHAPE_HEXAGON	Name under which mxHexagon is registered in mxCellRenderer.
ARROW_CLASSIC	Constant for classic arrow markers.
ARROW_CLASSIC_THIN	Constant for thin classic arrow markers.
ARROW_BLOCK	Constant for block arrow markers.
ARROW_BLOCK_THIN	Constant for thin block arrow markers.
ARROW_OPEN	Constant for open arrow markers.
ARROW_OPEN_THIN	Constant for thin open arrow markers.
ARROW_OVAL	Constant for oval arrow markers.
ARROW_DIAMOND	Constant for diamond arrow markers.
ARROW_DIAMOND_THIN	Constant for thin diamond arrow markers.
ALIGN_LEFT	Constant for left horizontal alignment.
ALIGN_CENTER	Constant for center horizontal alignment.
ALIGN_RIGHT	Constant for right horizontal alignment.
ALIGN_TOP	Constant for top vertical alignment.
ALIGN_MIDDLE	Constant for middle vertical alignment.
ALIGN_BOTTOM	Constant for bottom vertical alignment.
DIRECTION_NORTH	Constant for direction north.
DIRECTION_SOUTH	Constant for direction south.
DIRECTION_EAST	Constant for direction east.
DIRECTION_WEST	Constant for direction west.
TEXT_DIRECTION_DEFAULT	Constant for text direction default.
TEXT_DIRECTION_AUTO	Constant for text direction automatic.
TEXT_DIRECTION_LTR	Constant for text direction left to right.
TEXT_DIRECTION_RTL	Constant for text direction right to left.
DIRECTION_MASK_NONE	Constant for no direction.
DIRECTION_MASK_WEST	Bitwise mask for west direction.
DIRECTION_MASK_NORTH	Bitwise mask for north direction.
DIRECTION_MASK_SOUTH	Bitwise mask for south direction.
DIRECTION_MASK_EAST	Bitwise mask for east direction.
DIRECTION_MASK_ALL	Bitwise mask for all directions.
ELBOW_VERTICAL	Constant for elbow vertical.
ELBOW_HORIZONTAL	Constant for elbow horizontal.
EDGESTYLE_ELBOW	Name of the elbow edge style.
EDGESTYLE_ENTITY_RELATION	Name of the entity relation edge style.
EDGESTYLE_LOOP	Name of the loop edge style.
EDGESTYLE_SIDETOSIDE	Name of the side to side edge style.
EDGESTYLE_TOPTOBOTTOM	Name of the top to bottom edge style.
EDGESTYLE_ORTHOGONAL	Name of the generic orthogonal edge style.
EDGESTYLE_SEGMENT	Name of the generic segment edge style.
PERIMETER_ELLIPSE	Name of the ellipse perimeter.
PERIMETER_RECTANGLE	Name of the rectangle perimeter.
PERIMETER_RHOMBUS	Name of the rhombus perimeter.
PERIMETER_HEXAGON	Name of the hexagon perimeter.
PERIMETER_TRIANGLE	Name of the triangle perimeter.
mxEventObject	The mxEventObject is a wrapper for all properties of a single event.
Functions
mxEventObject	Constructs a new event object with the specified name.
Variables
name	Holds the name.
properties	Holds the properties as an associative array.
consumed	Holds the consumed state.
Functions
getName	Returns name.
getProperties	Returns properties.
getProperty	Returns the property for the given key.
isConsumed	Returns true if the event has been consumed.
consume	Consumes the event.
mxMouseEvent	Base class for all mouse events in mxGraph.
Functions
mxMouseEvent	Constructs a new event object for the given arguments.
Variables
consumed	Holds the consumed state of this event.
evt	Holds the inner event object.
graphX	Holds the x-coordinate of the event in the graph.
graphY	Holds the y-coordinate of the event in the graph.
state	Holds the optional mxCellState associated with this event.
sourceState	Holds the mxCellState that was passed to the constructor.
Functions
getEvent	Returns evt.
getSource	Returns the target DOM element using mxEvent.getSource for evt.
isSource	Returns true if the given mxShape is the source of evt.
getX	Returns <evt.clientX>.
getY	Returns <evt.clientY>.
getGraphX	Returns graphX.
getGraphY	Returns graphY.
getState	Returns state.
getCell	Returns the mxCell in state is not null.
isPopupTrigger	Returns true if the event is a popup trigger.
isConsumed	Returns consumed.
consume	Sets consumed to true and invokes preventDefault on the native event if such a method is defined.
mxEventSource	Base class for objects that dispatch named events.
Functions
mxEventSource	Constructs a new event source.
Variables
eventListeners	Holds the event names and associated listeners in an array.
eventsEnabled	Specifies if events can be fired.
eventSource	Optional source for events.
Functions
isEventsEnabled	Returns eventsEnabled.
setEventsEnabled	Sets eventsEnabled.
getEventSource	Returns eventSource.
setEventSource	Sets eventSource.
addListener	Binds the specified function to the given event name.
removeListener	Removes all occurrences of the given listener from eventListeners.
fireEvent	Dispatches the given event to the listeners which are registered for the event.
mxEvent	Cross-browser DOM event support.
Functions
addListener	Binds the function to the specified event on the given element.
removeListener	Removes the specified listener from the given element.
removeAllListeners	Removes all listeners from the given element.
addGestureListeners	Adds the given listeners for touch, mouse and/or pointer events.
removeGestureListeners	Removes the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.
redirectMouseEvents	Redirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.
release	Removes the known listeners from the given DOM node and its descendants.
disableContextMenu	Disables the context menu for the given element.
getSource	Returns the event’s target or srcElement depending on the browser.
isConsumed	Returns true if the event has been consumed using consume.
isTouchEvent	Returns true if the event was generated using a touch device (not a pen or mouse).
isPenEvent	Returns true if the event was generated using a pen (not a touch device or mouse).
isMultiTouchEvent	Returns true if the event was generated using a touch device (not a pen or mouse).
isMouseEvent	Returns true if the event was generated using a mouse (not a pen or touch device).
isLeftMouseButton	Returns true if the left mouse button is pressed for the given event.
isMiddleMouseButton	Returns true if the middle mouse button is pressed for the given event.
isRightMouseButton	Returns true if the right mouse button was pressed.
isPopupTrigger	Returns true if the event is a popup trigger.
isShiftDown	Returns true if the shift key is pressed for the given event.
isAltDown	Returns true if the alt key is pressed for the given event.
isControlDown	Returns true if the control key is pressed for the given event.
isMetaDown	Returns true if the meta key is pressed for the given event.
getMainEvent	Returns the touch or mouse event that contains the mouse coordinates.
getClientX	Returns true if the meta key is pressed for the given event.
getClientY	Returns true if the meta key is pressed for the given event.
consume	Consumes the given event.
Variables
LABEL_HANDLE	Index for the label handle in an mxMouseEvent.
ROTATION_HANDLE	Index for the rotation handle in an mxMouseEvent.
CUSTOM_HANDLE	Start index for the custom handles in an mxMouseEvent.
VIRTUAL_HANDLE	Start index for the virtual handles in an mxMouseEvent.
MOUSE_DOWN	Specifies the event name for mouseDown.
MOUSE_MOVE	Specifies the event name for mouseMove.
MOUSE_UP	Specifies the event name for mouseUp.
ACTIVATE	Specifies the event name for activate.
RESIZE_START	Specifies the event name for resizeStart.
RESIZE	Specifies the event name for resize.
RESIZE_END	Specifies the event name for resizeEnd.
MOVE_START	Specifies the event name for moveStart.
MOVE	Specifies the event name for move.
MOVE_END	Specifies the event name for moveEnd.
PAN_START	Specifies the event name for panStart.
PAN	Specifies the event name for pan.
PAN_END	Specifies the event name for panEnd.
MINIMIZE	Specifies the event name for minimize.
NORMALIZE	Specifies the event name for normalize.
MAXIMIZE	Specifies the event name for maximize.
HIDE	Specifies the event name for hide.
SHOW	Specifies the event name for show.
CLOSE	Specifies the event name for close.
DESTROY	Specifies the event name for destroy.
REFRESH	Specifies the event name for refresh.
SIZE	Specifies the event name for size.
SELECT	Specifies the event name for select.
FIRED	Specifies the event name for fired.
FIRE_MOUSE_EVENT	Specifies the event name for fireMouseEvent.
GESTURE	Specifies the event name for gesture.
TAP_AND_HOLD	Specifies the event name for tapAndHold.
GET	Specifies the event name for get.
RECEIVE	Specifies the event name for receive.
CONNECT	Specifies the event name for connect.
DISCONNECT	Specifies the event name for disconnect.
SUSPEND	Specifies the event name for suspend.
RESUME	Specifies the event name for suspend.
MARK	Specifies the event name for mark.
ROOT	Specifies the event name for root.
POST	Specifies the event name for post.
OPEN	Specifies the event name for open.
SAVE	Specifies the event name for open.
BEFORE_ADD_VERTEX	Specifies the event name for beforeAddVertex.
ADD_VERTEX	Specifies the event name for addVertex.
AFTER_ADD_VERTEX	Specifies the event name for afterAddVertex.
DONE	Specifies the event name for done.
EXECUTE	Specifies the event name for execute.
EXECUTED	Specifies the event name for executed.
BEGIN_UPDATE	Specifies the event name for beginUpdate.
START_EDIT	Specifies the event name for startEdit.
END_UPDATE	Specifies the event name for endUpdate.
END_EDIT	Specifies the event name for endEdit.
BEFORE_UNDO	Specifies the event name for beforeUndo.
UNDO	Specifies the event name for undo.
REDO	Specifies the event name for redo.
CHANGE	Specifies the event name for change.
NOTIFY	Specifies the event name for notify.
LAYOUT_CELLS	Specifies the event name for layoutCells.
CLICK	Specifies the event name for click.
SCALE	Specifies the event name for scale.
TRANSLATE	Specifies the event name for translate.
SCALE_AND_TRANSLATE	Specifies the event name for scaleAndTranslate.
UP	Specifies the event name for up.
DOWN	Specifies the event name for down.
ADD	Specifies the event name for add.
REMOVE	Specifies the event name for remove.
CLEAR	Specifies the event name for clear.
ADD_CELLS	Specifies the event name for addCells.
CELLS_ADDED	Specifies the event name for cellsAdded.
MOVE_CELLS	Specifies the event name for moveCells.
CELLS_MOVED	Specifies the event name for cellsMoved.
RESIZE_CELLS	Specifies the event name for resizeCells.
CELLS_RESIZED	Specifies the event name for cellsResized.
TOGGLE_CELLS	Specifies the event name for toggleCells.
CELLS_TOGGLED	Specifies the event name for cellsToggled.
ORDER_CELLS	Specifies the event name for orderCells.
CELLS_ORDERED	Specifies the event name for cellsOrdered.
REMOVE_CELLS	Specifies the event name for removeCells.
CELLS_REMOVED	Specifies the event name for cellsRemoved.
GROUP_CELLS	Specifies the event name for groupCells.
UNGROUP_CELLS	Specifies the event name for ungroupCells.
REMOVE_CELLS_FROM_PARENT	Specifies the event name for removeCellsFromParent.
FOLD_CELLS	Specifies the event name for foldCells.
CELLS_FOLDED	Specifies the event name for cellsFolded.
ALIGN_CELLS	Specifies the event name for alignCells.
LABEL_CHANGED	Specifies the event name for labelChanged.
CONNECT_CELL	Specifies the event name for connectCell.
CELL_CONNECTED	Specifies the event name for cellConnected.
SPLIT_EDGE	Specifies the event name for splitEdge.
FLIP_EDGE	Specifies the event name for flipEdge.
START_EDITING	Specifies the event name for startEditing.
EDITING_STARTED	Specifies the event name for editingStarted.
EDITING_STOPPED	Specifies the event name for editingStopped.
ADD_OVERLAY	Specifies the event name for addOverlay.
REMOVE_OVERLAY	Specifies the event name for removeOverlay.
UPDATE_CELL_SIZE	Specifies the event name for updateCellSize.
ESCAPE	Specifies the event name for escape.
DOUBLE_CLICK	Specifies the event name for doubleClick.
START	Specifies the event name for start.
RESET	Specifies the event name for reset.
mxXmlRequest	XML HTTP request wrapper.
Functions
mxXmlRequest	Constructs an XML HTTP request.
Variables
url	Holds the target URL of the request.
params	Holds the form encoded data for the POST request.
method	Specifies the request method.
async	Boolean indicating if the request is asynchronous.
binary	Boolean indicating if the request is binary.
withCredentials	Specifies if withCredentials should be used in HTML5-compliant browsers.
username	Specifies the username to be used for authentication.
password	Specifies the password to be used for authentication.
request	Holds the inner, browser-specific request object.
decodeSimulateValues	Specifies if request values should be decoded as URIs before setting the textarea value in simulate.
Functions
isBinary	Returns binary.
setBinary	Sets binary.
getText	Returns the response as a string.
isReady	Returns true if the response is ready.
getDocumentElement	Returns the document element of the response XML document.
getXml	Returns the response as an XML document.
getText	Returns the response as a string.
getStatus	Returns the status as a number, eg.
create	Creates and returns the inner request object.
send	Send the request to the target URL using the specified functions to process the response asychronously.
setRequestHeaders	Sets the headers for the given request and parameters.
simulate	Creates and posts a request to the given target URL using a dynamically created form inside the given document.
mxClipboard	Singleton that implements a clipboard for graph cells.
Variables
STEPSIZE	Defines the step size to offset the cells after each paste operation.
insertCount	Counts the number of times the clipboard data has been inserted.
cells	Holds the array of mxCells currently in the clipboard.
Functions
setCells	Sets the cells in the clipboard.
getCells	Returns the cells in the clipboard.
isEmpty	Returns true if the clipboard currently has not data stored.
cut	Cuts the given array of mxCells from the specified graph.
removeCells	Hook to remove the given cells from the given graph after a cut operation.
copy	Copies the given array of mxCells from the specified graph to cells.
paste	Pastes the cells into the specified graph restoring the relation to <parents>, if possible.
mxWindow	Basic window inside a document.
Events
mxEvent.MOVE_START	Fires before the window is moved.
mxEvent.MOVE	Fires while the window is being moved.
mxEvent.MOVE_END	Fires after the window is moved.
mxEvent.RESIZE_START	Fires before the window is resized.
mxEvent.RESIZE	Fires while the window is being resized.
mxEvent.RESIZE_END	Fires after the window is resized.
mxEvent.MAXIMIZE	Fires after the window is maximized.
mxEvent.MINIMIZE	Fires after the window is minimized.
mxEvent.NORMALIZE	Fires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATE	Fires after a window is activated.
mxEvent.SHOW	Fires after the window is shown.
mxEvent.HIDE	Fires after the window is hidden.
mxEvent.CLOSE	Fires before the window is closed.
mxEvent.DESTROY	Fires before the window is destroyed.
Functions
mxWindow	Constructs a new window with the given dimension and title to display the specified content.
Variables
closeImage	URL of the image to be used for the close icon in the titlebar.
minimizeImage	URL of the image to be used for the minimize icon in the titlebar.
normalizeImage	URL of the image to be used for the normalize icon in the titlebar.
maximizeImage	URL of the image to be used for the maximize icon in the titlebar.
normalizeImage	URL of the image to be used for the resize icon.
visible	Boolean flag that represents the visible state of the window.
minimumSize	mxRectangle that specifies the minimum width and height of the window.
destroyOnClose	Specifies if the window should be destroyed when it is closed.
contentHeightCorrection	Defines the correction factor for computing the height of the contentWrapper.
title	Reference to the DOM node (TD) that contains the title.
content	Reference to the DOM node that represents the window content.
Functions
init	Initializes the DOM tree that represents the window.
setTitle	Sets the window title to the given string.
setScrollable	Sets if the window contents should be scrollable.
activate	Puts the window on top of all other windows.
getElement	Returuns the outermost DOM node that makes up the window.
fit	Makes sure the window is inside the client area of the window.
isResizable	Returns true if the window is resizable.
setResizable	Sets if the window should be resizable.
setSize	Sets the size of the window.
setMinimizable	Sets if the window is minimizable.
getMinimumSize	Returns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandler	Installs the event listeners required for minimizing the window.
setMaximizable	Sets if the window is maximizable.
installMaximizeHandler	Installs the event listeners required for maximizing the window.
installMoveHandler	Installs the event listeners required for moving the window.
setLocation	Sets the upper, left corner of the window.
getX	Returns the current position on the x-axis.
getY	Returns the current position on the y-axis.
installCloseHandler	Adds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImage	Sets the image associated with the window.
setClosable	Sets the image associated with the window.
isVisible	Returns true if the window is visible.
setVisible	Shows or hides the window depending on the given flag.
show	Shows the window.
hide	Hides the window.
destroy	Destroys the window and removes all associated resources.
mxForm	A simple class for creating HTML forms.
Functions
mxForm	Creates a HTML table using the specified classname.
Variables
table	Holds the DOM node that represents the table.
body	Holds the DOM node that represents the tbody (table body).
Functions
getTable	Returns the table that contains this form.
addButtons	Helper method to add an OK and Cancel button using the respective functions.
addText	Adds an input for the given name, type and value and returns it.
addCheckbox	Adds a checkbox for the given name and value and returns the textfield.
addTextarea	Adds a textarea for the given name and value and returns the textarea.
addCombo	Adds a combo for the given name and returns the combo.
addOption	Adds an option for the given label to the specified combo.
addField	Adds a new row with the name and the input field in two columns and returns the given input.
mxImage	Encapsulates the URL, width and height of an image.
Functions
mxImage	Constructs a new image.
Variables
src	String that specifies the URL of the image.
width	Integer that specifies the width of the image.
height	Integer that specifies the height of the image.
mxDivResizer	Maintains the size of a div element in Internet Explorer.
Functions
mxDivResizer	Constructs an object that maintains the size of a div element when the window is being resized.
resizeWidth	Boolean specifying if the width should be updated.
resizeHeight	Boolean specifying if the height should be updated.
handlingResize	Boolean specifying if the width should be updated.
resize	Updates the style of the DIV after the window has been resized.
getDocumentWidth	Hook for subclassers to return the width of the document (without scrollbars).
getDocumentHeight	Hook for subclassers to return the height of the document (without scrollbars).
mxDragSource	Wrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.
Functions
mxDragSource	Constructs a new drag source for the given element.
Variables
element	Reference to the DOM node which was made draggable.
dropHandler	Holds the DOM node that is used to represent the drag preview.
dragOffset	mxPoint that specifies the offset of the dragElement.
dragElement	Holds the DOM node that is used to represent the drag preview.
previewElement	Optional mxRectangle that specifies the unscaled size of the preview.
enabled	Specifies if this drag source is enabled.
currentGraph	Reference to the mxGraph that is the current drop target.
currentDropTarget	Holds the current drop target under the mouse.
currentPoint	Holds the current drop location.
currentGuide	Holds an mxGuide for the currentGraph if <dragPreview> is not null.
currentGuide	Holds an mxGuide for the currentGraph if <dragPreview> is not null.
autoscroll	Specifies if the graph should scroll automatically.
guidesEnabled	Specifies if mxGuide should be enabled.
gridEnabled	Specifies if the grid should be allowed.
highlightDropTargets	Specifies if drop targets should be highlighted.
dragElementZIndex	ZIndex for the drag element.
dragElementOpacity	Opacity of the drag element in %.
checkEventSource	Whether the event source should be checked in <graphContainerEvent>.
Functions
isEnabled	Returns enabled.
setEnabled	Sets enabled.
isGuidesEnabled	Returns guidesEnabled.
setGuidesEnabled	Sets guidesEnabled.
isGridEnabled	Returns gridEnabled.
setGridEnabled	Sets gridEnabled.
getGraphForEvent	Returns the graph for the given mouse event.
getDropTarget	Returns the drop target for the given graph and coordinates.
createDragElement	Creates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.
createPreviewElement	Creates and returns an element which can be used as a preview in the given graph.
isActive	Returns true if this drag source is active.
reset	Stops and removes everything and restores the state of the object.
mouseDown	Returns the drop target for the given graph and coordinates.
startDrag	Creates the dragElement using createDragElement.
stopDrag	Invokes removeDragElement.
removeDragElement	Removes and destroys the dragElement.
getElementForEvent	Returns the topmost element under the given event.
graphContainsEvent	Returns true if the given graph contains the given event.
mouseMove	Gets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.
mouseUp	Processes the mouse up event and invokes drop, dragExit and stopDrag as required.
removeListeners	Actives the given graph as a drop target.
dragEnter	Actives the given graph as a drop target.
dragExit	Deactivates the given graph as a drop target.
dragOver	Implements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.
drop	Returns the drop target for the given graph and coordinates.
mxToolbar	Creates a toolbar inside a given DOM node.
Events
mxEvent.SELECT	Fires when an item was selected in the toolbar.
Functions
mxToolbar	Constructs a toolbar in the specified container.
Variables
container	Reference to the DOM nodes that contains the toolbar.
enabled	Specifies if events are handled.
noReset	Specifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.
updateDefaultMode	Boolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.
Functions
addItem	Adds the given function as an image with the specified title and icon and returns the new image node.
addCombo	Adds and returns a new SELECT element using the given style.
addCombo	Adds and returns a new SELECT element using the given title as the default element.
addOption	Adds and returns a new OPTION element inside the given SELECT element.
addSwitchMode	Adds a new selectable item to the toolbar.
addMode	Adds a new item to the toolbar.
selectMode	Resets the state of the previously selected mode and displays the given DOM node as selected.
resetMode	Selects the default mode and resets the state of the previously selected mode.
addSeparator	Adds the specifies image as a separator.
addBreak	Adds a break to the container.
addLine	Adds a horizontal line to the container.
destroy	Removes the toolbar and all its associated resources.
mxUndoableEdit	Implements a composite undoable edit.
Events
mxEvent.EXECUTED	Fires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.START_EDIT	Fires before a set of changes will be executed in undo or redo.
mxEvent.END_EDIT	Fires after a set of changeswas executed in undo or redo.
Functions
mxUndoableEdit	Constructs a new undoable edit for the given source.
Variables
source	Specifies the source of the edit.
changes	Array that contains the changes that make up this edit.
significant	Specifies if the undoable change is significant.
undone	Specifies if this edit has been undone.
redone	Specifies if this edit has been redone.
Functions
isEmpty	Returns true if the this edit contains no changes.
isSignificant	Returns significant.
add	Adds the specified change to this edit.
notify	Hook to notify any listeners of the changes after an undo or redo has been carried out.
die	Hook to free resources after the edit has been removed from the command history.
undo	Undoes all changes in this edit.
redo	Redoes all changes in this edit.
mxUndoManager	Implements a command history.
Events
mxEvent.CLEAR	Fires after clear was invoked.
mxEvent.UNDO	Fires afer a significant edit was undone in undo.
mxEvent.REDO	Fires afer a significant edit was redone in redo.
mxEvent.ADD	Fires after an undoable edit was added to the history.
Functions
mxUndoManager	Constructs a new undo manager with the given history size.
Variables
size	Maximum command history size.
history	Array that contains the steps of the command history.
indexOfNextAdd	Index of the element to be added next.
Functions
isEmpty	Returns true if the history is empty.
clear	Clears the command history.
canUndo	Returns true if an undo is possible.
undo	Undoes the last change.
canRedo	Returns true if a redo is possible.
redo	Redoes the last change.
undoableEditHappened	Method to be called to add new undoable edits to the history.
trim	Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.
mxUrlConverter	Converts relative and absolute URLs to absolute URLs with protocol and domain.
Variables
enabled	Specifies if the converter is enabled.
baseUrl	Specifies the base URL to be used as a prefix for relative URLs.
baseDomain	Specifies the base domain to be used as a prefix for absolute URLs.
Functions
updateBaseUrl	Private helper function to update the base URL.
isEnabled	Returns enabled.
setEnabled	Sets enabled.
getBaseUrl	Returns baseUrl.
setBaseUrl	Sets baseUrl.
getBaseDomain	Returns baseDomain.
setBaseDomain	Sets baseDomain.
isRelativeUrl	Returns true if the given URL is relative.
convert	Converts the given URL to an absolute URL with protol and domain.
mxPanningManager	Implements a handler for panning.
Variables
damper	Damper value for the panning.
delay	Delay in milliseconds for the panning.
handleMouseOut	Specifies if mouse events outside of the component should be handled.
border	Border to handle automatic panning inside the component.
mxPopupMenu	Basic popup menu.
Functions
mxPopupMenu	Constructs a popupmenu.
Events
mxEvent.SHOW	Fires after the menu has been shown in popup.
Variables
submenuImage	URL of the image to be used for the submenu icon.
zIndex	Specifies the zIndex for the popupmenu and its shadow.
factoryMethod	Function that is used to create the popup menu.
useLeftButtonForPopup	Specifies if popupmenus should be activated by clicking the left mouse button.
enabled	Specifies if events are handled.
itemCount	Contains the number of times addItem has been called for a new menu.
autoExpand	Specifies if submenus should be expanded on mouseover.
smartSeparators	Specifies if separators should only be added if a menu item follows them.
labels	Specifies if any labels should be visible.
Functions
init	Initializes the shapes required for this vertex handler.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isPopupTrigger	Returns true if the given event is a popupmenu trigger for the optional given cell.
addItem	Adds the given item to the given parent item.
createSubmenu	Creates the nodes required to add submenu items inside the given parent item.
showSubmenu	Shows the submenu inside the given parent row.
addSeparator	Adds a horizontal separator in the given parent item or the top-level menu if no parent is specified.
popup	Shows the popup menu for the given event and cell.
isMenuShowing	Returns true if the menu is showing.
showMenu	Shows the menu.
hideMenu	Removes the menu and all submenus.
hideSubmenu	Removes all submenus inside the given parent.
destroy	Destroys the handler and all its resources and DOM nodes.
mxAutoSaveManager	Manager for automatically saving diagrams.
Functions
mxAutoSaveManager	Constructs a new automatic layout for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
autoSaveDelay	Minimum amount of seconds between two consecutive autosaves.
autoSaveThrottle	Minimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds.
autoSaveThreshold	Minimum amount of ignored changes before an autosave.
ignoredChanges	Counter for ignored changes in autosave.
lastSnapshot	Used for autosaving.
enabled	Specifies if event handling is enabled.
changeHandler	Holds the function that handles graph model changes.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
setGraph	Sets the graph that the layouts operate on.
save	Empty hook that is called if the graph should be saved.
graphModelChanged	Invoked when the graph model has changed.
reset	Resets all counters.
destroy	Removes all handlers from the graph and deletes the reference to it.
mxAnimation	Implements a basic animation in JavaScript.
Functions
mxAnimation	Constructs an animation.
Variables
delay	Specifies the delay between the animation steps.
thread	Reference to the thread while the animation is running.
Functions
isRunning	Returns true if the animation is running.
startAnimation	Starts the animation by repeatedly invoking updateAnimation.
updateAnimation	Hook for subclassers to implement the animation.
stopAnimation	Stops the animation by deleting the timer and fires an mxEvent.DONE.
mxMorphing	Implements animation for morphing cells.
Functions
mxMorphing	Constructs an animation.
Variables
graph	Specifies the delay between the animation steps.
steps	Specifies the maximum number of steps for the morphing.
step	Contains the current step.
ease	Ease-off for movement towards the given vector.
cells	Optional array of cells to be animated.
Functions
updateAnimation	Animation step.
show	Shows the changes in the given mxCellStatePreview.
animateCell	Animates the given cell state using mxCellStatePreview.moveState.
stopRecursion	Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.
getDelta	Returns the vector between the current rendered state and the future location of the state after the display will be updated.
getOriginForCell	Returns the top, left corner of the given cell.
mxImageBundle	Maps from keys to base64 encoded images or file locations.
Variables
images	Maps from keys to images.
alt	Specifies if the fallback representation should be returned.
Functions
putImage	Adds the specified entry to the map.
getImage	Returns the value for the given key.
mxImageExport	Creates a new image export instance to be used with an export canvas.
Functions
mxImageExport	Constructs a new image export.
Variables
includeOverlays	Specifies if overlays should be included in the export.
Functions
drawState	Draws the given state and all its descendants to the given canvas.
drawState	Draws the given state and all its descendants to the given canvas.
getLinkForCellState	Returns the link for the given cell state and canvas.
drawCellState	Draws the given state to the given canvas.
drawShape	Draws the shape of the given state.
drawText	Draws the text of the given state.
drawOverlays	Draws the overlays for the given state.
mxAbstractCanvas2D	Base class for all canvases.
Functions
mxAbstractCanvas2D	Constructs a new abstract canvas.
Variables
converter	Holds the mxUrlConverter to convert image URLs.
state	Holds the current state.
states	Stack of states.
path	Holds the current path as an array.
rotateHtml	Switch for rotation of HTML.
lastX	Holds the last x coordinate.
lastY	Holds the last y coordinate.
moveOp	Contains the string used for moving in paths.
lineOp	Contains the string used for moving in paths.
quadOp	Contains the string used for quadratic paths.
curveOp	Contains the string used for bezier curves.
closeOp	Holds the operator for closing curves.
pointerEvents	Boolean value that specifies if events should be handled.
Functions
createUrlConverter	Create a new mxUrlConverter and returns it.
reset	Resets the state of this canvas.
createState	Creates the state of the this canvas.
format	Rounds all numbers to integers.
addOp	Adds the given operation to the path.
rotatePoint	Rotates the given point and returns the result as an mxPoint.
save	Saves the current state.
restore	Restores the current state.
setLink	Sets the current link.
scale	Scales the current state.
translate	Translates the current state.
rotate	Rotates the current state.
setAlpha	Sets the current alpha.
setFillAlpha	Sets the current solid fill alpha.
setStrokeAlpha	Sets the current stroke alpha.
setFillColor	Sets the current fill color.
setGradient	Sets the current gradient.
setStrokeColor	Sets the current stroke color.
setStrokeWidth	Sets the current stroke width.
setDashed	Enables or disables dashed lines.
setDashPattern	Sets the current dash pattern.
setLineCap	Sets the current line cap.
setLineJoin	Sets the current line join.
setMiterLimit	Sets the current miter limit.
setFontColor	Sets the current font color.
setFontColor	Sets the current font color.
setFontColor	Sets the current font color.
setFontSize	Sets the current font size.
setFontFamily	Sets the current font family.
setFontStyle	Sets the current font style.
setShadow	Enables or disables and configures the current shadow.
setShadowColor	Enables or disables and configures the current shadow.
setShadowAlpha	Enables or disables and configures the current shadow.
setShadowOffset	Enables or disables and configures the current shadow.
begin	Starts a new path.
moveTo	Moves the current path the given coordinates.
lineTo	Draws a line to the given coordinates.
quadTo	Adds a quadratic curve to the current path.
curveTo	Adds a bezier curve to the current path.
arcTo	Adds the given arc to the current path.
close	Closes the current path.
end	Empty implementation for backwards compatibility.
mxXmlCanvas2D	Base class for all canvases.
Functions
mxXmlCanvas2D	Constructs a new abstract canvas.
Variables
root	Reference to the container for the SVG content.
textEnabled	Specifies if text output should be enabled.
compressed	Specifies if the output should be compressed by removing redundant calls.
Functions
writeDefaults
format	Returns a formatted number with 2 decimal places.
createElement	Creates the given element using the owner document of root.
save	Saves the drawing state.
restore	Restores the drawing state.
scale	Scales the output.
translate	Translates the output.
rotate	Rotates and/or flips the output around a given center.
setAlpha	Sets the current alpha.
setFillAlpha	Sets the current fill alpha.
setStrokeAlpha	Sets the current stroke alpha.
setFillColor	Sets the current fill color.
setGradient	Sets the gradient.
setStrokeColor	Sets the current stroke color.
setStrokeWidth	Sets the current stroke width.
setDashed	Enables or disables dashed lines.
setDashPattern	Sets the current dash pattern.
setLineCap	Sets the line cap.
setLineJoin	Sets the line join.
setMiterLimit	Sets the miter limit.
setFontColor	Sets the current font color.
setFontBackgroundColor	Sets the current font background color.
setFontBorderColor	Sets the current font border color.
setFontSize	Sets the current font size.
setFontFamily	Sets the current font family.
setFontStyle	Sets the current font style.
setShadow	Enables or disables shadows.
setShadowColor	Sets the current shadow color.
setShadowAlpha	Sets the current shadows alpha.
setShadowOffset	Sets the current shadow offset.
rect	Puts a rectangle into the drawing buffer.
roundrect	Puts a rounded rectangle into the drawing buffer.
ellipse	Puts an ellipse into the drawing buffer.
image	Paints an image.
begin	Starts a new path and puts it into the drawing buffer.
moveTo	Moves the current path the given point.
lineTo	Draws a line to the given coordinates.
quadTo	Adds a quadratic curve to the current path.
curveTo	Adds a bezier curve to the current path.
close	Closes the current path.
text	Paints the given text.
stroke	Paints the outline of the current drawing buffer.
fill	Fills the current drawing buffer.
fillAndStroke	Fills the current drawing buffer and its outline.
mxSvgCanvas2D	Extends mxAbstractCanvas2D to implement a canvas for SVG.
Functions
mxSvgCanvas2D	Constructs a new SVG canvas.
Variables
root	Reference to the container for the SVG content.
gradients	Local cache of gradients for quick lookups.
defs	Reference to the defs section of the SVG document.
styleEnabled	Stores the value of styleEnabled passed to the constructor.
path	Holds the current DOM node.
matchHtmlAlignment	Specifies if plain text output should match the vertical HTML alignment.
textEnabled	Specifies if text output should be enabled.
foEnabled	Specifies if use of foreignObject for HTML markup is allowed.
foAltText	Specifies the fallback text for unsupported foreignObjects in exported documents.
foOffset	Offset to be used for foreignObjects.
textOffset	Offset to be used for text elements.
imageOffset	Offset to be used for image elements.
strokeTolerance	Adds transparent paths for strokes.
minStrokeWidth	Minimum stroke width for output.
refCount	Local counter for references in SVG export.
blockImagePointerEvents	Specifies if a transparent rectangle should be added on top of images to absorb all pointer events.
lineHeightCorrection	Correction factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValue	Default value for active pointer events.
fontMetricsPadding	Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSize	Specifies if offsetWidth and offsetHeight should be cached.
Functions
format	Rounds all numbers to 2 decimal points.
getBaseUrl	Returns the URL of the page without the hash part.
reset	Returns any offsets for rendering pixels.
createStyle	Creates the optional style section.
createElement	Private helper function to create SVG elements
getAlternateContent	Returns the alternate content for the given foreignObject.
createGradientId	Private helper function to create SVG elements
getSvgGradient	Private helper function to create SVG elements
createSvgGradient	Creates the given SVG gradient.
addNode	Private helper function to create SVG elements
updateFill	Transfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidth	Returns the current stroke width (>= 1), ie.
updateStroke	Transfers the stroke attributes from <state> to <node>.
updateStrokeAttributes	Transfers the stroke attributes from <state> to <node>.
createDashPattern	Creates the SVG dash pattern for the given state.
createTolerance	Creates a hit detection tolerance shape for the given node.
createShadow	Creates a shadow for the given node.
setLink	Experimental implementation for hyperlinks.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
rect	Private helper function to create SVG elements
roundrect	Private helper function to create SVG elements
ellipse	Private helper function to create SVG elements
image	Private helper function to create SVG elements
convertHtml	Converts the given HTML string to XHTML.
createDiv	Private helper function to create SVG elements
text	Paints the given text.
createClip	Creates a clip for the given coordinates.
text	Paints the given text.
updateFont	Updates the text properties for the given node.
addTextBackground	Background color and border
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills and paints the outline of the current path.
mxVmlCanvas2D	Implements a canvas to be used for rendering VML.
Variables
root	Reference to the container for the SVG content.
path	Holds the current DOM node.
textEnabled	Specifies if text output should be enabledetB.
moveOp	Contains the string used for moving in paths.
lineOp	Contains the string used for moving in paths.
curveOp	Contains the string used for bezier curves.
closeOp	Holds the operator for closing curves.
rotatedHtmlBackground	Background color for rotated HTML.
vmlScale	Specifies the scale used to draw VML shapes.
Functions
createElement	Creates the given element using the document.
createVmlElement	Creates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.
addNode	Adds the current node to the root.
createTransparentFill	Creates a transparent fill.
createFill	Creates a fill for the current state.
createStroke	Creates a fill for the current state.
getVmlDashPattern	Returns a VML dash pattern for the current dashPattern.
createShadow	Creates a shadow for the given node.
createShadowFill	Creates the fill for the shadow.
createShadowStroke	Creates the stroke for the shadow.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
quadTo	Replaces quadratic curve with bezier curve in VML.
createRect	Sets the glass gradient.
rect	Sets the current path to a rectangle.
roundrect	Sets the current path to a rounded rectangle.
ellipse	Sets the current path to an ellipse.
image	Paints an image.
createText	Creates the innermost element that contains the HTML text.
text	Paints the given text.
plainText	Paints the outline of the current path.
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills and paints the outline of the current path.
mxGuide	Implements the alignment of selection cells to other cells in the graph.
Functions
mxGuide	Constructs a new guide object.
Variables
graph	Reference to the enclosing mxGraph instance.
states	Contains the mxCellStates that are used for alignment.
horizontal	Specifies if horizontal guides are enabled.
vertical	Specifies if vertical guides are enabled.
vertical	Holds the mxShape for the horizontal guide.
vertical	Holds the mxShape for the vertical guide.
rounded	Specifies if rounded coordinates should be used.
Functions
setStates	Sets the mxCellStates that should be used for alignment.
isEnabledForEvent	Returns true if the guide should be enabled for the given native event.
getGuideTolerance	Returns the tolerance for the guides.
createGuideShape	Returns the mxShape to be used for painting the respective guide.
move	Moves the <bounds> by the given mxPoint and returnt the snapped point.
hide	Hides all current guides.
hide	Hides all current guides.
hide	Hides all current guides.
setVisible	Shows or hides the current guides.
destroy	Destroys all resources that this object uses.
mxShape	Base class for all shapes.
Functions
mxShape	Constructs a new shape.
Variables
dialect	Holds the dialect in which the shape is to be painted.
scale	Holds the scale in which the shape is being painted.
antiAlias	Rendering hint for configuring the canvas.
minSvgStrokeWidth	Minimum stroke width for SVG output.
bounds	Holds the mxRectangle that specifies the bounds of this shape.
points	Holds the array of mxPoints that specify the points of this shape.
node	Holds the outermost DOM node that represents this shape.
state	Optional reference to the corresponding mxCellState.
style	Optional reference to the style of the corresponding mxCellState.
boundingBox	Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
stencil	Holds the mxStencil that defines the shape.
svgStrokeTolerance	Event-tolerance for SVG strokes (in px).
pointerEvents	Specifies if pointer events should be handled.
svgPointerEvents	Specifies if pointer events should be handled.
shapePointerEvents	Specifies if pointer events outside of shape should be handled.
stencilPointerEvents	Specifies if pointer events outside of stencils should be handled.
vmlScale	Scale for improving the precision of VML rendering.
outline	Specifies if the shape should be drawn as an outline.
visible	Specifies if the shape is visible.
useSvgBoundingBox	Allows to use the SVG bounding box in SVG.
Functions
init	Initializes the shape by creaing the DOM node using create and adding it into the given container.
initStyles	Sets the styles to their default values.
isParseVml	Specifies if any VML should be added via insertAdjacentHtml to the DOM.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
getSvgScreenOffset	Returns 0, or 0.5 if <strokewidth> % 2 == 1.
create	Creates and returns the DOM node(s) for the shape in the given container.
createSvg	Creates and returns the SVG node(s) to represent this shape.
createVml	Creates and returns the VML node to represent this shape.
createHtml	Creates and returns the HTML DOM node(s) to represent this shape.
reconfigure	Reconfigures this shape.
redraw	Creates and returns the SVG node(s) to represent this shape.
clear	Removes all child nodes and resets all CSS.
updateBoundsFromPoints	Updates the bounds based on the points.
getLabelBounds	Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
getLabelMargins	Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
checkBounds	Returns true if the bounds are not null and all of its variables are numeric.
createVmlGroup	Returns the temporary element used for rendering in IE8 standards mode.
redrawShape	Updates the SVG or VML shape.
createCanvas	Creates a new canvas for drawing this shape.
createSvgCanvas	Creates and returns an mxSvgCanvas2D for rendering this shape.
createVmlCanvas	Creates and returns an mxVmlCanvas2D for rendering this shape.
updateVmlContainer	Updates the bounds of the VML container.
redrawHtml	Allow optimization by replacing VML with HTML.
updateHtmlFilters	Allow optimization by replacing VML with HTML.
mixedModeHtml	Allow optimization by replacing VML with HTML.
mixedModeHtml	Allow optimization by replacing VML with HTML.
destroyCanvas	Destroys the given canvas which was used for drawing.
paint	Generic rendering code.
configureCanvas	Sets the state of the canvas for drawing the shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
updateTransform	Sets the scale and rotation on the given canvas.
paintVertexShape	Paints the vertex shape.
paintBackground	Hook for subclassers.
paintForeground	Hook for subclassers.
paintEdgeShape	Hook for subclassers.
getArcSize	Returns the arc size for the given dimension.
paintGlassEffect	Paints the glass gradient effect.
addPoints	Paints the given points with rounded corners.
resetStyles	Resets all styles.
apply	Applies the style of the given mxCellState to the shape.
setCursor	Sets the cursor on the given shape.
getCursor	Returns the current cursor.
isRoundable	Hook for subclassers.
updateBoundingBox	Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBox	Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBox	Augments the bounding box with the strokewidth and shadow offsets.
isPaintBoundsInverted	Returns true if the bounds should be inverted.
getRotation	Returns the rotation from the style.
getTextRotation	Returns the rotation for the text label.
getShapeRotation	Returns the actual rotation of the shape.
createTransparentSvgRectangle	Adds a transparent rectangle that catches all events.
setTransparentBackgroundImage	Sets a transparent background CSS style to catch all events.
releaseSvgGradients	Paints the line shape.
destroy	Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.
mxStencil	Implements a generic shape which is based on a XML node as a description.
Functions
mxStencil	Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.
Variables
defaultLocalized	Static global variable that specifies the default value for the localized attribute of the text element.
Functions
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content and images.
Variables
desc	Holds the XML node with the stencil description.
constraints	Holds an array of mxConnectionConstraints as defined in the shape.
aspect	Holds the aspect of the shape.
w0	Holds the width of the shape.
h0	Holds the height of the shape.
bgNodes	Holds the XML node with the stencil description.
fgNodes	Holds the XML node with the stencil description.
strokewidth	Holds the strokewidth direction from the description.
Functions
parseDescription	Reads w0, h0, aspect, bgNodes and fgNodes from desc.
parseConstraints	Reads the constraints from desc into constraints using parseConstraint.
parseConstraint	Parses the given XML node and returns its mxConnectionConstraint.
evaluateTextAttribute	Gets the given attribute as a text.
evaluateAttribute	Gets the attribute for the given name from the given node.
drawShape	Draws this stencil inside the given bounds.
drawChildren	Draws this stencil inside the given bounds.
computeAspect	Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.
drawNode	Draws this stencil inside the given bounds.
mxStencilRegistry	A singleton class that provides a registry for stencils and the methods for painting those stencils onto a canvas or into a DOM.
Functions
addStencil	Adds the given mxStencil.
getStencil	Returns the mxStencil for the given name.
mxMarker	A static class that implements all markers for VML and SVG using a registry.
Variables
markers	Maps from markers names to functions to paint the markers.
Functions
addMarker	Adds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.
createMarker	Returns a function to paint the given marker.
mxActor	Extends mxShape to implement an actor shape.
Functions
mxActor	Constructs a new actor shape.
paintVertexShape	Redirects to redrawPath for subclasses to work.
redrawPath	Draws the path for this shape.
mxCloud	Extends mxActor to implement a cloud shape.
Functions
mxCloud	Constructs a new cloud shape.
redrawPath	Draws the path for this shape.
mxRectangleShape	Extends mxShape to implement a rectangle shape.
Functions
mxRectangleShape	Constructs a new rectangle shape.
isHtmlAllowed	Returns true for non-rounded, non-rotated shapes with no glass gradient.
paintBackground	Generic background painting implementation.
isRoundable	Adds roundable support.
paintForeground	Generic background painting implementation.
mxEllipse	Extends mxShape to implement an ellipse shape.
Functions
mxEllipse	Constructs a new ellipse shape.
paintVertexShape	Paints the ellipse shape.
mxDoubleEllipse	Extends mxShape to implement a double ellipse shape.
Functions
mxDoubleEllipse	Constructs a new ellipse shape.
Variables
vmlScale	Scale for improving the precision of VML rendering.
Functions
paintBackground	Paints the background.
paintForeground	Paints the foreground.
getLabelBounds	Returns the bounds for the label.
mxRhombus	Extends mxShape to implement a rhombus (aka diamond) shape.
Functions
mxRhombus	Constructs a new rhombus shape.
isRoundable	Adds roundable support.
paintVertexShape	Generic painting implementation.
mxPolyline	Extends mxShape to implement a polyline (a line with multiple points).
Functions
mxPolyline	Constructs a new polyline shape.
getRotation	Returns 0.
getShapeRotation	Returns 0.
isPaintBoundsInverted	Returns false.
paintEdgeShape	Paints the line shape.
paintLine	Paints the line shape.
paintLine	Paints the line shape.
mxArrow	Extends mxShape to implement an arrow shape.
Functions
mxArrow	Constructs a new arrow shape.
augmentBoundingBox	Augments the bounding box with the edge width and markers.
paintEdgeShape	Paints the line shape.
mxArrowConnector	Extends mxShape to implement an new rounded arrow shape with support for waypoints and double arrows.
Functions
mxArrowConnector	Constructs a new arrow shape.
Variables
useSvgBoundingBox	Allows to use the SVG bounding box in SVG.
resetStyles	Overrides mxShape to reset spacing.
Functions
augmentBoundingBox	Augments the bounding box with the edge width and markers.
paintEdgeShape	Paints the line shape.
paintEdgeShape	Paints the line shape.
isArrowRounded	Returns wether the arrow is rounded
getStartArrowWidth	Returns the width of the start arrow
getEndArrowWidth	Returns the width of the end arrow
getEdgeWidth	Returns the width of the body of the edge
isOpenEnded	Returns whether the ends of the shape are drawn
isMarkerStart	Returns whether the start marker is drawn
isMarkerEnd	Returns whether the end marker is drawn
mxText	Extends mxShape to implement a text shape.
Functions
mxText	Constructs a new text shape.
Variables
baseSpacingTop	Specifies the spacing to be added to the top spacing.
baseSpacingBottom	Specifies the spacing to be added to the bottom spacing.
baseSpacingLeft	Specifies the spacing to be added to the left spacing.
baseSpacingRight	Specifies the spacing to be added to the right spacing.
replaceLinefeeds	Specifies if linefeeds in HTML labels should be replaced with BR tags.
verticalTextRotation	Rotation for vertical text.
ignoreClippedStringSize	Specifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.
ignoreStringSize	Specifies if the actual string size should be measured.
textWidthPadding	Specifies the padding to be added to the text width for the bounding box.
lastValue	Contains the last rendered text value.
cacheEnabled	Specifies if caching for HTML labels should be enabled.
Functions
isParseVml	Text shapes do not contain VML markup and do not need to be parsed.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
getSvgScreenOffset	Disables offset in IE9 for crisper image output.
checkBounds	Returns true if the bounds are not null and all of its variables are numeric.
paint	Generic rendering code.
redraw	Renders the text using the given DOM nodes.
resetStyles	Resets all styles.
apply	Extends mxShape to update the text styles.
getAutoDirection	Used to determine the automatic text direction.
updateBoundingBox	Updates the <boundingBox> for this shape using the given node and position.
getShapeRotation	Returns 0 to avoid using rotation in the canvas via updateTransform.
getTextRotation	Returns the rotation for the text label of the corresponding shape.
isPaintBoundsInverted	Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.
configureCanvas	Sets the state of the canvas for drawing the shape.
updateVmlContainer	Sets the width and height of the container to 1px.
redrawHtmlShape	Updates the HTML node(s) to reflect the latest bounds and scale.
updateHtmlTransform	Returns the spacing as an mxPoint.
setInnerHtml	Sets the inner HTML of the given element to the <value>.
updateHtmlFilter	Rotated text rendering quality is bad for IE9 quirks/IE8 standards
updateValue	Updates the HTML node(s) to reflect the latest bounds and scale.
updateFont	Updates the HTML node(s) to reflect the latest bounds and scale.
updateSize	Updates the HTML node(s) to reflect the latest bounds and scale.
getMargin	Returns the spacing as an mxPoint.
getSpacing	Returns the spacing as an mxPoint.
mxTriangle	Implementation of the triangle shape.
Functions
mxTriangle	Constructs a new triangle shape.
isRoundable	Adds roundable support.
redrawPath	Draws the path for this shape.
mxHexagon	Implementation of the hexagon shape.
Functions
mxHexagon	Constructs a new hexagon shape.
redrawPath	Draws the path for this shape.
mxLine	Extends mxShape to implement a horizontal line shape.
Functions
mxLine	Constructs a new line shape.
paintVertexShape	Redirects to redrawPath for subclasses to work.
mxImageShape	Extends mxShape to implement an image shape.
Functions
mxImageShape	Constructs a new image shape.
Variables
preserveImageAspect	Switch to preserve image aspect.
Functions
getSvgScreenOffset	Disables offset in IE9 for crisper image output.
apply	Overrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
createHtml	Creates and returns the HTML DOM node(s) to represent this shape.
isRoundable	Disables inherited roundable support.
paintVertexShape	Generic background painting implementation.
redraw	Overrides mxShape.redraw to preserve the aspect ratio of images.
mxLabel	Extends mxShape to implement an image shape with a label.
Functions
mxLabel	Constructs a new label shape.
Variables
imageSize	Default width and height for the image.
spacing	Default value for image spacing.
indicatorSize	Default width and height for the indicicator.
indicatorSpacing	Default spacing between image and indicator.
Functions
init	Initializes the shape and the <indicator>.
redraw	Reconfigures this shape.
isHtmlAllowed	Returns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.
paintForeground	Generic background painting implementation.
paintImage	Generic background painting implementation.
getImageBounds	Generic background painting implementation.
paintIndicator	Generic background painting implementation.
getIndicatorBounds	Generic background painting implementation.
redrawHtmlShape	Generic background painting implementation.
mxCylinder	Extends mxShape to implement an cylinder shape.
Functions
mxCylinder	Constructs a new cylinder shape.
Variables
maxHeight	Defines the maximum height of the top and bottom part of the cylinder shape.
svgStrokeTolerance	Sets stroke tolerance to 0 for SVG.
Functions
paintVertexShape	Redirects to redrawPath for subclasses to work.
redrawPath	Draws the path for this shape.
redrawPath	Draws the path for this shape.
mxConnector	Extends mxShape to implement a connector shape.
Functions
mxConnector	Constructs a new connector shape.
updateBoundingBox	Updates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.
paintEdgeShape	Paints the line shape.
createMarker	Prepares the marker by adding offsets in pts and returning a function to paint the marker.
augmentBoundingBox	Augments the bounding box with the strokewidth and shadow offsets.
mxSwimlane	Extends mxShape to implement a swimlane shape.
Functions
mxSwimlane	Constructs a new swimlane shape.
Variables
imageSize	Default imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.
Functions
isRoundable	Adds roundable support.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getArcSize	Returns the arcsize for the swimlane.
paintVertexShape	Paints the swimlane vertex shape.
paintVertexShape	Paints the swimlane vertex shape.
paintSwimlane	Paints the swimlane vertex shape.
paintRoundedSwimlane	Paints the swimlane vertex shape.
paintDivider	Paints the divider between swimlane title and content area.
paintSeparator	Paints the vertical or horizontal separator line between swimlanes.
getImageBounds	Paints the swimlane vertex shape.
mxGraphLayout	Base class for all layout algorithms in mxGraph.
Functions
mxGraphLayout	Constructs a new layout using the given layouts.
Variables
graph	Reference to the enclosing mxGraph.
useBoundingBox	Boolean indicating if the bounding box of the label should be used if its available.
parent	The parent cell of the layout, if any
Functions
moveCell	Notified when a cell is being moved in a parent that has automatic layout to update the cell state (eg.
execute	Executes the layout algorithm for the children of the given parent.
getGraph	Returns the graph that this layout operates on.
getConstraint	Returns the constraint for the given key and cell.
traverse	Traverses the (directed) graph invoking the given function for each visited vertex and edge.
isAncestor	Returns true if the given parent is an ancestor of the given child.
isVertexMovable	Returns a boolean indicating if the given mxCell is movable or bendable by the algorithm.
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
isEdgeIgnored	Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
setEdgeStyleEnabled	Disables or enables the edge style of the given edge.
setOrthogonalEdge	Disables or enables orthogonal end segments of the given edge.
getParentOffset	Determines the offset of the given parent to the parent of the layout
setEdgePoints	Replaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.
setVertexLocation	Sets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.
getVertexBounds	Returns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.
arrangeGroups	Shortcut to mxGraph.updateGroupBounds with moveGroup set to true.
WeightedCellSorter	A utility class used to track cells whilst sorting occurs on the weighted sum of their connected edges.
Functions
WeightedCellSorter	Constructs a new weighted cell sorted for the given cell and weight.
Variables
weightedValue	The weighted value of the cell stored.
nudge	Whether or not to flip equal weight values.
visited	Whether or not this cell has been visited in the current assignment.
rankIndex	The index this cell is in the model rank.
cell	The cell whose median value is being calculated.
Functions
compare	Compares two WeightedCellSorters.
mxStackLayout	Extends mxGraphLayout to create a horizontal or vertical stack of the child vertices.
Functions
mxStackLayout	Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontal	Specifies the orientation of the layout.
spacing	Specifies the spacing between the cells.
x0	Specifies the horizontal origin of the layout.
y0	Specifies the vertical origin of the layout.
border	Border to be added if fill is true.
marginTop	Top margin for the child area.
marginLeft	Top margin for the child area.
marginRight	Top margin for the child area.
marginBottom	Top margin for the child area.
keepFirstLocation	Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
fill	Boolean indicating if dimension should be changed to fill out the parent cell.
resizeParent	If the parent should be resized to match the width/height of the stack.
resizeParentMax	Use maximum of existing value and new value for resize of parent.
resizeLast	If the last element should be resized to fill out the parent.
wrap	Value at which a new column or row should be created.
borderCollapse	If the strokeWidth should be ignored.
allowGaps	If gaps should be allowed in the stack.
gridSize	Grid size for alignment of position and size.
Functions
isHorizontal	Returns horizontal.
moveCell	Implements mxGraphLayout.moveCell.
getParentSize	Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
getLayoutCells	Returns the cells to be layouted.
snap	Snaps the given value to the grid size.
execute	Implements mxGraphLayout.execute.
execute	Implements mxGraphLayout.execute.
execute	Implements mxGraphLayout.execute.
mxPartitionLayout	Extends mxGraphLayout for partitioning the parent cell vertically or horizontally by filling the complete area with the child cells.
Functions
mxPartitionLayout	Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontal	Boolean indicating the direction in which the space is partitioned.
spacing	Integer that specifies the absolute spacing in pixels between the children.
border	Integer that specifies the absolute inset in pixels for the parent that contains the children.
resizeVertices	Boolean that specifies if vertices should be resized.
Functions
isHorizontal	Returns horizontal.
moveCell	Implements mxGraphLayout.moveCell.
execute	Implements mxGraphLayout.execute.
mxCompactTreeLayout	Extends mxGraphLayout to implement a compact tree (Moen) algorithm.
Functions
mxCompactTreeLayout	Constructs a new compact tree layout for the specified graph and orientation.
Variables
horizontal	Specifies the orientation of the layout.
invert	Specifies if edge directions should be inverted.
resizeParent	If the parents should be resized to match the width/height of the children.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
groupPadding	Padding added to resized parents.
groupPaddingTop	Top padding added to resized parents.
groupPaddingRight	Right padding added to resized parents.
groupPaddingBottom	Bottom padding added to resized parents.
groupPaddingLeft	Left padding added to resized parents.
parentsChanged	A set of the parents that need updating based on children process as part of the layout.
moveTree	Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
visited	Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
levelDistance	Holds the levelDistance.
nodeDistance	Holds the nodeDistance.
resetEdges	Specifies if all edge points of traversed edges should be removed.
prefHozEdgeSep	The preferred horizontal distance between edges exiting a vertex.
prefVertEdgeOff	The preferred vertical offset between edges exiting a vertex.
minEdgeJetty	The minimum distance for an edge jetty from a vertex.
channelBuffer	The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.
edgeRouting	Whether or not to apply the internal tree edge routing.
sortEdges	Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
alignRanks	Whether or not the tops of cells in each rank should be aligned across the rank
maxRankHeight	An array of the maximum height of cells (relative to the layout direction) per rank
root	The cell to use as the root of the tree
node	The internal node representation of the root cell.
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
isHorizontal	Returns horizontal.
execute	Implements mxGraphLayout.execute.
moveNode	Moves the specified node and all of its children by the given amount.
sortOutgoingEdges	Called if sortEdges is true to sort the array of outgoing edges in place.
findRankHeights	Stores the maximum height (relative to the layout direction) of cells in each rank
setCellHeights	Set the cells heights (relative to the layout direction) when the tops of each rank are to be aligned
dfs	Does a depth first search starting at the specified cell.
layout	Starts the actual compact tree layout algorithm at the given node.
horizontalLayout
verticalLayout
attachParent
layoutLeaf
join
merge
offset
bridge
createNode
apply
createLine
adjustParents	Adjust parent cells whose child geometries have changed.
localEdgeProcessing	Moves the specified node and all of its children by the given amount.
localEdgeProcessing	Separates the x position of edges as they connect to vertices
mxRadialTreeLayout	Extends mxGraphLayout to implement a radial tree algorithm.
Functions
mxRadialTreeLayout	Constructs a new radial tree layout for the specified graph
Variables
angleOffset	The initial offset to compute the angle position.
rootx	The X co-ordinate of the root cell
rooty	The Y co-ordinate of the root cell
levelDistance	Holds the levelDistance.
nodeDistance	Holds the nodeDistance.
autoRadius	Specifies if the radios should be computed automatically
sortEdges	Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
rowMinX	Array of leftmost x coordinate of each row
rowMaxX	Array of rightmost x coordinate of each row
rowMinCenX	Array of x coordinate of leftmost vertex of each row
rowMaxCenX	Array of x coordinate of rightmost vertex of each row
rowRadi	Array of y deltas of each row behind root vertex, also the radius in the tree
row	Array of vertices on each row
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
execute	Implements mxGraphLayout.execute.
calcRowDims	Recursive function to calculate the dimensions of each row
mxFastOrganicLayout	Extends mxGraphLayout to implement a fast organic layout algorithm.
Functions
mxCompactTreeLayout	Constructs a new fast organic layout for the specified graph.
Variables
useInputOrigin	Specifies if the top left corner of the input cells should be the origin of the layout result.
resetEdges	Specifies if all edge points of traversed edges should be removed.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
forceConstant	The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.
forceConstantSquared	Cache of <forceConstant>^2 for performance.
minDistanceLimit	Minimal distance limit.
minDistanceLimit	Minimal distance limit.
minDistanceLimitSquared	Cached version of minDistanceLimit squared.
initialTemp	Start value of temperature.
temperature	Temperature to limit displacement at later stages of layout.
maxIterations	Total number of iterations to run the layout though.
iteration	Current iteration count.
vertexArray	An array of all vertices to be laid out.
dispX	An array of locally stored X co-ordinate displacements for the vertices.
dispY	An array of locally stored Y co-ordinate displacements for the vertices.
cellLocation	An array of locally stored co-ordinate positions for the vertices.
radius	The approximate radius of each cell, nodes only.
radiusSquared	The approximate radius squared of each cell, nodes only.
isMoveable	Array of booleans representing the movable states of the vertices.
neighbours	Local copy of cell neighbours.
indices	Hashtable from cells to local indices.
allowedToRun	Boolean flag that specifies if the layout is allowed to run.
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
execute	Implements mxGraphLayout.execute.
calcPositions	Takes the displacements calculated for each cell and applies them to the local cache of cell positions.
calcAttraction	Calculates the attractive forces between all laid out nodes linked by edges
calcRepulsion	Calculates the repulsive forces between all laid out nodes
reduceTemperature	Reduces the temperature of the layout from an initial setting in a linear fashion to zero.
mxCircleLayout	Extends mxGraphLayout to implement a circluar layout for a given radius.
Functions
mxCircleLayout	Constructs a new circular layout for the specified radius.
Variables
radius	Integer specifying the size of the radius.
moveCircle	Boolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.
x0	Integer specifying the left coordinate of the circle.
y0	Integer specifying the top coordinate of the circle.
resetEdges	Specifies if all edge points of traversed edges should be removed.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
Functions
execute	Implements mxGraphLayout.execute.
getRadius	Returns the radius to be used for the given vertex count.
circle	Executes the circular layout for the specified array of vertices and the given radius.
mxParallelEdgeLayout	Extends mxGraphLayout for arranging parallel edges.
Functions
mxCompactTreeLayout	Constructs a new fast organic layout for the specified graph.
Variables
spacing	Defines the spacing between the parallels.
Functions
execute	Implements mxGraphLayout.execute.
findParallels	Finds the parallel edges in the given parent.
getEdgeId	Returns a unique ID for the given edge.
layout	Lays out the parallel edges in the given array.
route	Routes the given edge via the given point.
mxCompositeLayout	Allows to compose multiple layouts into a single layout.
Functions
mxCompositeLayout	Constructs a new layout using the given layouts.
Variables
layouts	Holds the array of mxGraphLayouts that this layout contains.
layouts	Reference to the mxGraphLayouts that handles moves.
Functions
moveCell	Implements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.
execute	Implements mxGraphLayout.execute by executing all layouts in a single transaction.
mxEdgeLabelLayout	Extends mxGraphLayout to implement an edge label layout.
Functions
mxEdgeLabelLayout	Constructs a new edge label layout.
execute	Implements mxGraphLayout.execute.
placeLabels	Places the labels of the given edges.
avoid	Places the labels of the given edges.
mxGraphAbstractHierarchyCell	An abstraction of an internal hierarchy node or edge
Functions
mxGraphAbstractHierarchyCell	Constructs a new hierarchical layout algorithm.
Variables
maxRank	The maximum rank this cell occupies.
minRank	The minimum rank this cell occupies.
x	The x position of this cell for each layer it occupies
y	The y position of this cell for each layer it occupies
width	The width of this cell
height	The height of this cell
nextLayerConnectedCells	A cached version of the cells this cell connects to on the next layer up
previousLayerConnectedCells	A cached version of the cells this cell connects to on the next layer down
temp	Temporary variable for general use.
Functions
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isEdge	Returns whether or not this cell is an edge
isVertex	Returns whether or not this cell is a node
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
setX	Set the value of x for the specified layer
getX	Gets the value of x on the specified layer
setY	Set the value of y for the specified layer
mxGraphHierarchyNode	An abstraction of a hierarchical edge for the hierarchy layout
Functions
mxGraphHierarchyNode	Constructs an internal node to represent the specified real graph cell
Variables
cell	The graph cell this object represents.
id	The object identity of the wrapped cell
connectsAsTarget	Collection of hierarchy edges that have this node as a target
connectsAsSource	Collection of hierarchy edges that have this node as a source
hashCode	Assigns a unique hashcode for each node.
Functions
getRankValue	Returns the integer value of the layer that this node resides in
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isVertex	Returns true.
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
isAncestor
getCoreCell	Gets the core vertex associated with this wrapper
mxGraphHierarchyEdge	An abstraction of a hierarchical edge for the hierarchy layout
Functions
mxGraphHierarchyEdge	Constructs a hierarchy edge
Variables
edges	The graph edge(s) this object represents.
ids	The object identities of the wrapped cells
source	The node this edge is sourced at
target	The node this edge targets
isReversed	Whether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout
Functions
invert	Inverts the direction of this internal edge(s)
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isEdge	Returns true.
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
getCoreCell	Gets the first core edge associated with this wrapper
mxGraphHierarchyModel	Internal model of a hierarchical graph.
Functions
mxGraphHierarchyModel	Creates an internal ordered graph model using the vertices passed in.
Variables
maxRank	Stores the largest rank number allocated
vertexMapper	Map from graph vertices to internal model nodes.
edgeMapper	Map from graph edges to internal model edges
ranks	Mapping from rank number to actual rank
roots	Store of roots of this hierarchy model, these are real graph cells, not internal cells
parent	The parent cell whose children are being laid out
dfsCount	Count of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANK	High value to start source layering scan rank value from.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
Functions
createInternalCells	Creates all edges in the internal model
initialRank	Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
fixRanks	Fixes the layer assignments to the values stored in the nodes.
visit	A depth first search through the internal heirarchy model.
dfs	Performs a depth first search on the internal hierarchy model
extendedDfs	Performs a depth first search on the internal hierarchy model.
mxSwimlaneModel	Internal model of a hierarchical graph.
Functions
mxSwimlaneModel	Creates an internal ordered graph model using the vertices passed in.
Variables
maxRank	Stores the largest rank number allocated
vertexMapper	Map from graph vertices to internal model nodes.
edgeMapper	Map from graph edges to internal model edges
ranks	Mapping from rank number to actual rank
roots	Store of roots of this hierarchy model, these are real graph cells, not internal cells
parent	The parent cell whose children are being laid out
dfsCount	Count of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANK	High value to start source layering scan rank value from.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
ranksPerGroup	An array of the number of ranks within each swimlane
Functions
createInternalCells	Creates all edges in the internal model
initialRank	Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
maxChainDfs	Performs a depth first search on the internal hierarchy model.
fixRanks	Fixes the layer assignments to the values stored in the nodes.
visit	A depth first search through the internal heirarchy model.
dfs	Performs a depth first search on the internal hierarchy model
extendedDfs	Performs a depth first search on the internal hierarchy model.
mxHierarchicalLayoutStage	The specific layout interface for hierarchical layouts.
Functions
mxHierarchicalLayoutStage	Constructs a new hierarchical layout stage.
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxMedianHybridCrossingReduction	Sets the horizontal locations of node and edge dummy nodes on each layer.
Functions
mxMedianHybridCrossingReduction	Creates a coordinate assignment.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
maxIterations	The maximum number of iterations to perform whilst reducing edge crossings.
nestedBestRanks	Stores each rank as a collection of cells in the best order found for each layer so far
currentBestCrossings	The total number of crossings found in the best configuration so far
iterationsWithoutImprovement	The total number of crossings found in the best configuration so far
maxNoImprovementIterations	The total number of crossings found in the best configuration so far
Functions
execute	Performs a vertex ordering within ranks as described by Gansner et al 1993
calculateCrossings	Calculates the total number of edge crossing in the current graph.
calculateRankCrossing	Calculates the number of edges crossings between the specified rank and the rank below it.
transpose	Takes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing
weightedMedian	Sweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks
medianRank	Attempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks
medianValue	Calculates the median rank order positioning for the specified cell using the connected cells on the specified rank.
MedianCellSorter	A utility class used to track cells whilst sorting occurs on the median values.
Functions
MedianCellSorter	Constructs a new median cell sorter.
Variables
medianValue	The weighted value of the cell stored.
cell	The cell whose median value is being calculated
Functions
compare	Compares two MedianCellSorters.
mxMinimumCycleRemover	An implementation of the first stage of the Sugiyama layout.
Functions
mxMinimumCycleRemover	Creates a cycle remover for the given internal model.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
Functions
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxCoordinateAssignment	Sets the horizontal locations of node and edge dummy nodes on each layer.
Functions
mxCoordinateAssignment	Creates a coordinate assignment.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
intraCellSpacing	The minimum buffer between cells on the same rank.
interRankCellSpacing	The minimum distance between cells on adjacent ranks.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges.
maxIterations	The number of heuristic iterations to run.
prefHozEdgeSep	The preferred horizontal distance between edges exiting a vertex
prefVertEdgeOff	The preferred vertical offset between edges exiting a vertex
minEdgeJetty	The minimum distance for an edge jetty from a vertex
channelBuffer	The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed
jettyPositions	Map of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.
orientation	The position of the root ( start ) node(s) relative to the rest of the laid out graph.
initialX	The minimum x position node placement starts at
limitX	The maximum x value this positioning lays up to
currentXDelta	The sum of x-displacements for the current iteration
widestRank	The rank that has the widest x position
rankTopY	Internal cache of top-most values of Y for each rank
rankBottomY	Internal cache of bottom-most value of Y for each rank
widestRankValue	The X-coordinate of the edge of the widest rank
rankWidths	The width of all the ranks
rankY	The Y-coordinate of all the ranks
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
nextLayerConnectedCache	A store of connections to the layer above for speed
previousLayerConnectedCache	A store of connections to the layer below for speed
groupPadding	Padding added to resized parents
Functions
execute	A basic horizontal coordinate assignment algorithm
minNode	Performs one median positioning sweep in both directions
medianPos	Performs one median positioning sweep in one direction
rankMedianPosition	Performs median minimisation over one rank.
calculatedWeightedValue	Calculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer
medianXValue	Calculates the median position of the connected cell on the specified rank
initialCoords	Sets up the layout in an initial positioning.
rankCoordinates	Sets up the layout in an initial positioning.
calculateWidestRank	Calculates the width rank in the hierarchy.
minPath	Straightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.
repositionValid	Determines whether or not a node may be moved to the specified x position on the specified rank
setCellLocations	Sets the cell locations in the facade to those stored after this layout processing step has completed.
localEdgeProcessing	Separates the x position of edges as they connect to vertices
setEdgePosition	Fixes the control points
setVertexLocation	Fixes the position of the specified vertex.
processReversedEdge	Hook to add additional processing
mxSwimlaneOrdering	An implementation of the first stage of the Sugiyama layout.
Functions
mxSwimlaneOrdering	Creates a cycle remover for the given internal model.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
Functions
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.
mxHierarchicalLayout	A hierarchical layout algorithm.
Functions
mxHierarchicalLayout	Constructs a new hierarchical layout algorithm.
Variables
roots	Holds the array of mxCell that this layout contains.
resizeParent	Specifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParent	Specifies if the parent should be moved if resizeParent is enabled.
parentBorder	The border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacing	The spacing buffer added between cells on the same layer.
interRankCellSpacing	The spacing buffer added between cell on adjacent layers.
interHierarchySpacing	The spacing buffer between unconnected hierarchies.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges
orientation	The position of the root node(s) relative to the laid out graph in.
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestors	Whether or not to drill into child cells and layout in reverse group order.
model	The internal mxGraphHierarchyModel formed of the layout.
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgeStyle	The style to apply between cell layers to edge segments
Functions
getModel	Returns the internal mxGraphHierarchyModel for this layout algorithm.
execute	Executes the layout for the children of the specified parent.
findRoots	Returns all visible children in the given parent which do not have incoming edges.
getEdges	Returns the connected edges for the given cell.
getVisibleTerminal	Helper function to return visible terminal for edge allowing for ports
run	The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendants	Creates an array of descendant cells
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetween	Returns the edges between the given source and target.
cycleStage	Executes the cycle stage using mxMinimumCycleRemover.
layeringStage	Implements first stage of a Sugiyama layout.
crossingStage	Executes the crossing stage using mxMedianHybridCrossingReduction.
placementStage	Executes the placement stage using mxCoordinateAssignment.
mxSwimlaneLayout	A hierarchical layout algorithm.
Functions
mxSwimlaneLayout	Constructs a new hierarchical layout algorithm.
Variables
roots	Holds the array of mxCell that this layout contains.
swimlanes	Holds the array of mxCell of the ordered swimlanes to lay out
dummyVertices	Holds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes
dummyVertexWidth	The cell width of any dummy vertices inserted
resizeParent	Specifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParent	Specifies if the parent should be moved if resizeParent is enabled.
parentBorder	The border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacing	The spacing buffer added between cells on the same layer.
interRankCellSpacing	The spacing buffer added between cell on adjacent layers.
interHierarchySpacing	The spacing buffer between unconnected hierarchies.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges
orientation	The position of the root node(s) relative to the laid out graph in.
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestors	Whether or not to drill into child cells and layout in reverse group order.
model	The internal mxSwimlaneModel formed of the layout.
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgeStyle	The style to apply between cell layers to edge segments
Functions
getModel	Returns the internal mxSwimlaneModel for this layout algorithm.
execute	Executes the layout for the children of the specified parent.
updateGroupBounds	Updates the bounds of the given array of groups so that it includes all child vertices.
findRoots	Returns all visible children in the given parent which do not have incoming edges.
getEdges	Returns the connected edges for the given cell.
getVisibleTerminal	Helper function to return visible terminal for edge allowing for ports
run	The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendants	Creates an array of descendant cells
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetween	Returns the edges between the given source and target.
cycleStage	Executes the cycle stage using mxMinimumCycleRemover.
layeringStage	Implements first stage of a Sugiyama layout.
crossingStage	Executes the crossing stage using mxMedianHybridCrossingReduction.
placementStage	Executes the placement stage using mxCoordinateAssignment.
mxGraphModel	Extends mxEventSource to implement a graph model.
Events
mxEvent.CHANGE	Fires when an undoable edit is dispatched.
mxEvent.NOTIFY	Same as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model.
mxEvent.EXECUTE	Fires between begin- and endUpdate and after an atomic change was executed in the model.
mxEvent.EXECUTED	Fires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.BEGIN_UPDATE	Fires after the updateLevel was incremented in beginUpdate.
mxEvent.START_EDIT	Fires after the updateLevel was changed from 0 to 1.
mxEvent.END_UPDATE	Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.
mxEvent.END_EDIT	Fires after the updateLevel was changed from 1 to 0.
mxEvent.BEFORE_UNDO	Fires before the change is dispatched after the update level has reached 0 in endUpdate.
mxEvent.UNDO	Fires after the change was dispatched in endUpdate.
Functions
mxGraphModel	Constructs a new graph model.
Variables
root	Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
cells	Maps from Ids to cells.
maintainEdgeParent	Specifies if edges should automatically be moved into the nearest common ancestor of their terminals.
ignoreRelativeEdgeParent	Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
createIds	Specifies if the model should automatically create Ids for new cells.
prefix	Defines the prefix of new Ids.
postfix	Defines the postfix of new Ids.
nextId	Specifies the next Id to be created.
currentEdit	Holds the changes for the current transaction.
updateLevel	Counter for the depth of nested transactions.
endingUpdate	True if the program flow is currently inside endUpdate.
Functions
clear	Sets a new root using createRoot.
isCreateIds	Returns createIds.
setCreateIds	Sets createIds.
createRoot	Creates a new root cell with a default layer (child 0).
getCell	Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
filterCells	Returns the cells from the given array where the given filter function returns true.
getDescendants	Returns all descendants of the given cell and the cell itself in an array.
filterDescendants	Visits all cells recursively and applies the specified filter function to each cell.
getRoot	Returns the root of the model or the topmost parent of the given cell.
setRoot	Sets the root of the model using mxRootChange and adds the change to the current transaction.
rootChanged	Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
isRoot	Returns true if the given cell is the root of the model and a non-null value.
isLayer	Returns true if isRoot returns true for the parent of the given cell.
isAncestor	Returns true if the given parent is an ancestor of the given child.
contains	Returns true if the model contains the given mxCell.
getParent	Returns the parent of the given cell.
add	Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
cellAdded	Inner callback to update cells when a cell has been added.
createId	Hook method to create an Id for the specified cell.
updateEdgeParents	Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
updateEdgeParent	Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
getOrigin	Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
getNearestCommonAncestor	Returns the nearest common ancestor for the specified cells.
remove	Removes the specified cell from the model using mxChildChange and adds the change to the current transaction.
cellRemoved	Inner callback to update cells when a cell has been removed.
parentForCellChanged	Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
getChildCount	Returns the number of children in the given cell.
getChildAt	Returns the child of the given mxCell at the given index.
getChildren	Returns all children of the given mxCell as an array of mxCells.
getChildVertices	Returns the child vertices of the given parent.
getChildEdges	Returns the child edges of the given parent.
getChildCells	Returns the children of the given cell that are vertices and/or edges depending on the arguments.
getTerminal	Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.
setTerminal	Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
setTerminals	Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
terminalForCellChanged	Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
getEdgeCount	Returns the number of distinct edges connected to the given cell.
getEdgeAt	Returns the edge of cell at the given index.
getDirectedEdgeCount	Returns the number of incoming or outgoing edges, ignoring the given edge.
getConnections	Returns all edges of the given cell without loops.
getIncomingEdges	Returns the incoming edges of the given cell without loops.
getOutgoingEdges	Returns the outgoing edges of the given cell without loops.
getEdges	Returns all distinct edges connected to this cell as a new array of mxCells.
getEdgesBetween	Returns all edges between the given source and target pair.
getOpposites	Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
getTopmostCells	Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
isVertex	Returns true if the given cell is a vertex.
isEdge	Returns true if the given cell is an edge.
isConnectable	Returns true if the given mxCell is connectable.
getValue	Returns the user object of the given mxCell using mxCell.getValue.
setValue	Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
valueForCellChanged	Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
getGeometry	Returns the mxGeometry of the given mxCell.
setGeometry	Sets the mxGeometry of the given mxCell.
geometryForCellChanged	Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
getStyle	Returns the style of the given mxCell.
setStyle	Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
styleForCellChanged	Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
isCollapsed	Returns true if the given mxCell is collapsed.
setCollapsed	Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
collapsedStateForCellChanged	Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
isVisible	Returns true if the given mxCell is visible.
setVisible	Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
visibleStateForCellChanged	Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
execute	Executes the given edit and fires events if required.
beginUpdate	Increments the updateLevel by one.
endUpdate	Decrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.
createUndoableEdit	Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.
mergeChildren	Merges the children of the given cell into the given target cell inside this model.
mergeChildren	Clones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.
getParents	Returns an array that represents the set (no duplicates) of all parents for the given array of cells.
cloneCell	Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.
cloneCells	Returns an array of clones for the given array of mxCells.
cloneCellImpl	Inner helper method for cloning cells recursively.
cellCloned	Hook for cloning the cell.
restoreClone	Inner helper method for restoring the connections in a network of cloned cells.
mxRootChange	Action to change the root in a model.
Functions
mxRootChange	Constructs a change of the root in the specified model.
execute	Carries out a change of the root using mxGraphModel.rootChanged.
mxChildChange	Action to add or remove a child in a model.
Functions
mxChildChange	Constructs a change of a child in the specified model.
execute	Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnect	Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.
mxTerminalChange	Action to change a terminal in a model.
Functions
mxTerminalChange	Constructs a change of a terminal in the specified model.
execute	Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.
mxValueChange	Action to change a user object in a model.
Functions
mxValueChange	Constructs a change of a user object in the specified model.
execute	Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.
mxStyleChange	Action to change a cell’s style in a model.
Functions
mxStyleChange	Constructs a change of a style in the specified model.
execute	Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.
mxGeometryChange	Action to change a cell’s geometry in a model.
Functions
mxGeometryChange	Constructs a change of a geometry in the specified model.
execute	Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.
mxCollapseChange	Action to change a cell’s collapsed state in a model.
Functions
mxCollapseChange	Constructs a change of a collapsed state in the specified model.
execute	Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.
mxVisibleChange	Action to change a cell’s visible state in a model.
Functions
mxVisibleChange	Constructs a change of a visible state in the specified model.
execute	Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.
mxCellAttributeChange	Action to change the attribute of a cell’s user object.
Functions
mxCellAttributeChange	Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.
execute	Changes the attribute of the cell’s user object by using mxCell.setAttribute.
mxCell	Cells are the elements of the graph model.
Functions
onInit	Called from within the constructor.
mxCell	Constructs a new cell to be used in a graph model.
Variables
id	Holds the Id.
value	Holds the user object.
geometry	Holds the mxGeometry.
style	Holds the style as a string of the form [(stylename\|key=value);].
vertex	Specifies whether the cell is a vertex.
edge	Specifies whether the cell is an edge.
connectable	Specifies whether the cell is connectable.
visible	Specifies whether the cell is visible.
collapsed	Specifies whether the cell is collapsed.
parent	Reference to the parent cell.
source	Reference to the source terminal.
target	Reference to the target terminal.
children	Holds the child cells.
edges	Holds the edges.
mxTransient	List of members that should not be cloned inside clone.
Functions
getId	Returns the Id of the cell as a string.
setId	Sets the Id of the cell to the given string.
getValue	Returns the user object of the cell.
setValue	Sets the user object of the cell.
valueChanged	Changes the user object after an in-place edit and returns the previous value.
getGeometry	Returns the mxGeometry that describes the geometry.
setGeometry	Sets the mxGeometry to be used as the geometry.
getStyle	Returns a string that describes the style.
setStyle	Sets the string to be used as the style.
isVertex	Returns true if the cell is a vertex.
setVertex	Specifies if the cell is a vertex.
isEdge	Returns true if the cell is an edge.
setEdge	Specifies if the cell is an edge.
isConnectable	Returns true if the cell is connectable.
setConnectable	Sets the connectable state.
isVisible	Returns true if the cell is visibile.
setVisible	Specifies if the cell is visible.
isCollapsed	Returns true if the cell is collapsed.
setCollapsed	Sets the collapsed state.
getParent	Returns the cell’s parent.
setParent	Sets the parent cell.
getTerminal	Returns the source or target terminal.
setTerminal	Sets the source or target terminal and returns the new terminal.
getChildCount	Returns the number of child cells.
getIndex	Returns the index of the specified child in the child array.
getChildAt	Returns the child at the specified index.
insert	Inserts the specified child into the child array at the specified index and updates the parent reference of the child.
remove	Removes the child at the specified index from the child array and returns the child that was removed.
removeFromParent	Removes the cell from its parent.
getEdgeCount	Returns the number of edges in the edge array.
getEdgeIndex	Returns the index of the specified edge in edges.
getEdgeAt	Returns the edge at the specified index in edges.
insertEdge	Inserts the specified edge into the edge array and returns the edge.
removeEdge	Removes the specified edge from the edge array and returns the edge.
removeFromTerminal	Removes the edge from its source or target terminal.
hasAttribute	Returns true if the user object is an XML node that contains the given attribute.
getAttribute	Returns the specified attribute from the user object if it is an XML node.
setAttribute	Sets the specified attribute on the user object if it is an XML node.
clone	Returns a clone of the cell.
cloneValue	Returns a clone of the cell’s user object.
mxGeometry	Extends mxRectangle to represent the geometry of a cell.
Functions
mxGeometry	Constructs a new object to describe the size and location of a vertex or the control points of an edge.
Variables
TRANSLATE_CONTROL_POINTS	Global switch to translate the points in translate.
alternateBounds	Stores alternate values for x, y, width and height in a rectangle.
sourcePoint	Defines the source mxPoint of the edge.
targetPoint	Defines the target mxPoint of the edge.
points	Array of mxPoints which specifies the control points along the edge.
offset	For edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge.
relative	Specifies if the coordinates in the geometry are to be interpreted as relative coordinates.
Functions
swap	Swaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.
getTerminalPoint	Returns the mxPoint representing the source or target point of this edge.
setTerminalPoint	Sets the sourcePoint or targetPoint to the given mxPoint and returns the new point.
rotate	Rotates the geometry by the given angle around the given center.
translate	Translates the geometry by the specified amount.
scale	Scales the geometry by the given amount.
equals	Returns true if the given object equals this geometry.
mxCellPath	Implements a mechanism for temporary cell Ids.
Variables
PATH_SEPARATOR	Defines the separator between the path components.
Functions
create	Creates the cell path for the given cell.
getParentPath	Returns the path for the parent of the cell represented by the given path.
resolve	Returns the cell for the specified cell path using the given root as the root of the path.
compare	Compares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.
mxPerimeter	Provides various perimeter functions to be used in a style as the value of mxConstants.STYLE_PERIMETER.
Functions
RectanglePerimeter	Describes a rectangular perimeter for the given bounds.
EllipsePerimeter	Describes an elliptic perimeter.
RhombusPerimeter	Describes a rhombus (aka diamond) perimeter.
TrianglePerimeter	Describes a triangle perimeter.
HexagonPerimeter	Describes a hexagon perimeter.
mxPrintPreview	Implements printing of a diagram across multiple pages.
Functions
mxPrintPreview	Constructs a new print preview for the given parameters.
Variables
graph	Reference to the mxGraph that should be previewed.
pageFormat	Holds the mxRectangle that defines the page format.
scale	Holds the scale of the print preview.
border	The border inset around each side of every page in the preview.
marginTop	The margin at the top of the page (number).
marginBottom	The margin at the bottom of the page (number).
x0	Holds the horizontal offset of the output.
y0	Holds the vertical offset of the output.
autoOrigin	Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
printOverlays	Specifies if overlays should be printed.
printControls	Specifies if controls (such as folding icons) should be printed.
printBackgroundImage	Specifies if the background image should be printed.
backgroundColor	Holds the color value for the page background color.
borderColor	Holds the color value for the page border.
title	Holds the title of the preview window.
pageSelector	Boolean that specifies if the page selector should be displayed.
wnd	Reference to the preview window.
targetWindow	Assign any window here to redirect the rendering in open.
pageCount	Holds the actual number of pages in the preview.
clipping	Specifies is clipping should be used to avoid creating too many cell states in large diagrams.
Functions
getWindow	Returns wnd.
getDocType	Returns the string that should go before the HTML tag in the print preview page.
appendGraph	Adds the given graph to the existing print preview.
open	Shows the print preview window.
addPageBreak	Adds a page break to the given document.
closeDocument	Writes the closing tags for body and page after calling writePostfix.
writeHead	Writes the HEAD section into the given document, without the opening and closing HEAD tags.
writePostfix	Called before closing the body of the page.
createPageSelector	Creates the page selector table.
renderPage	Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
getRoot	Returns the root cell for painting the graph.
addGraphFragment	Adds a graph fragment to the given div.
getLinkForCellState	Returns the link for the given cell state.
insertBackgroundImage	Inserts the background image into the given div.
getCoverPages	Returns the pages to be added before the print output.
getAppendices	Returns the pages to be added after the print output.
print	Opens the print preview and shows the print dialog.
close	Closes the print preview window.
mxStylesheet	Defines the appearance of the cells in a graph.
Functions
mxStylesheet	Constructs a new stylesheet and assigns default styles.
styles	Maps from names to cell styles.
createDefaultVertexStyle	Creates and returns the default vertex style.
createDefaultEdgeStyle	Creates and returns the default edge style.
putDefaultVertexStyle	Sets the default style for vertices using defaultVertex as the stylename.
putDefaultEdgeStyle	Sets the default style for edges using defaultEdge as the stylename.
getDefaultVertexStyle	Returns the default style for vertices.
getDefaultEdgeStyle	Sets the default style for edges.
putCellStyle	Stores the given map of key, value pairs under the given name in styles.
getCellStyle	Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.
mxCellState	Represents the current state of a cell in a given mxGraphView.
Functions
mxCellState	Constructs a new object that represents the current state of the given cell in the specified view.
Variables
view	Reference to the enclosing mxGraphView.
cell	Reference to the mxCell that is represented by this state.
style	Contains an array of key, value pairs that represent the style of the cell.
invalidStyle	Specifies if the style is invalid.
invalid	Specifies if the state is invalid.
origin	mxPoint that holds the origin for all child cells.
absolutePoints	Holds an array of mxPoints that represent the absolute points of an edge.
absoluteOffset	mxPoint that holds the absolute offset.
visibleSourceState	Caches the visible source terminal state.
visibleTargetState	Caches the visible target terminal state.
terminalDistance	Caches the distance between the end points for an edge.
length	Caches the length of an edge.
segments	Array of numbers that represent the cached length of each segment of the edge.
shape	Holds the mxShape that represents the cell graphically.
text	Holds the mxText that represents the label of the cell.
unscaledWidth	Holds the unscaled width of the state.
Functions
getPerimeterBounds	Returns the mxRectangle that should be used as the perimeter of the cell.
setAbsoluteTerminalPoint	Sets the first or last point in absolutePoints depending on isSource.
setCursor	Sets the given cursor on the shape and text shape.
getVisibleTerminal	Returns the visible source or target terminal cell.
getVisibleTerminalState	Returns the visible source or target terminal state.
setVisibleTerminalState	Sets the visible source or target terminal state.
getCellBounds	Returns the unscaled, untranslated bounds.
getPaintBounds	Returns the unscaled, untranslated paint bounds.
updateCachedBounds	Updates the cellBounds and paintBounds.
setState	Copies all fields from the given state to this state.
clone	Returns a clone of this mxPoint.
destroy	Destroys the state and all associated resources.
mxGraphSelectionModel	Implements the selection model for a graph.
Events
mxEvent.UNDO	Fires after the selection was changed in changeSelection.
mxEvent.CHANGE	Fires after the selection changes by executing an mxSelectionChange.
Functions
mxGraphSelectionModel	Constructs a new graph selection model for the given mxGraph.
Variables
doneResource	Specifies the resource key for the status message after a long operation.
updatingSelectionResource	Specifies the resource key for the status message while the selection is being updated.
graph	Reference to the enclosing mxGraph.
singleSelection	Specifies if only one selected item at a time is allowed.
Functions
isSingleSelection	Returns singleSelection as a boolean.
setSingleSelection	Sets the singleSelection flag.
isSelected	Returns true if the given mxCell is selected.
isEmpty	Returns true if no cells are currently selected.
clear	Clears the selection and fires a <change> event if the selection was not empty.
setCell	Selects the specified mxCell using setCells.
setCells	Selects the given array of mxCells and fires a <change> event.
getFirstSelectableCell	Returns the first selectable cell in the given array of cells.
addCell	Adds the given mxCell to the selection and fires a <select> event.
addCells	Adds the given array of mxCells to the selection and fires a <select> event.
removeCell	Removes the specified mxCell from the selection and fires a <select> event for the remaining cells.
removeCells
changeSelection	Inner callback to add the specified mxCell to the selection.
cellAdded	Inner callback to add the specified mxCell to the selection.
cellRemoved	Inner callback to remove the specified mxCell from the selection.
mxSelectionChange	Action to change the current root in a view.
Functions
mxCurrentRootChange	Constructs a change of the current root in the given view.
execute	Changes the current root of the view.
mxCellEditor	In-place editor for the graph.
Functions
mxCellEditor	Constructs a new in-place editor for the specified graph.
Variables
graph	Reference to the enclosing mxGraph.
textarea	Holds the DIV that is used for text editing.
editingCell	Reference to the mxCell that is currently being edited.
trigger	Reference to the event that was used to start editing.
modified	Specifies if the label has been modified.
autoSize	Specifies if the textarea should be resized while the text is being edited.
selectText	Specifies if the text should be selected when editing starts.
emptyLabelText	Text to be displayed for empty labels.
escapeCancelsEditing	If true, pressing the escape key will stop editing and not accept the new value.
textNode	Reference to the label DOM node that has been hidden.
zIndex	Specifies the zIndex for the textarea.
minResize	Defines the minimum width and height to be used in resize.
wordWrapPadding	Correction factor for word wrapping width.
blurEnabled	If focusLost should be called if textarea loses the focus.
initialValue	Holds the initial editing value to check if the current value was modified.
align	Holds the current temporary horizontal alignment for the cell style.
Functions
init	Creates the textarea and installs the event listeners.
applyValue	Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.
setAlign	Sets the temporary horizontal alignment for the current editing session.
getInitialValue	Gets the initial editing value for the given cell.
getCurrentValue	Returns the current editing value.
isCancelEditingKeyEvent	Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
installListeners	Installs listeners for focus, change and standard key event handling.
isStopEditingEvent	Returns true if the given keydown event should stop cell editing.
isEventSource	Returns true if this editor is the source for the given native event.
resize	Returns modified.
focusLost	Called if the textarea has lost focus.
getBackgroundColor	Returns the background color for the in-place editor.
isLegacyEditor	Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
startEditing	Starts the editor for the given cell.
isSelectText	Returns selectText.
isSelectText	Returns selectText.
stopEditing	Stops the editor and applies the value if cancel is false.
prepareTextarea	Prepares the textarea for getting its value in stopEditing.
isHideLabel	Returns true if the label should be hidden while the cell is being edited.
getMinimumSize	Returns the minimum width and height for editing the given state.
getEditorBounds	Returns the mxRectangle that defines the bounds of the editor.
getEmptyLabelText	Returns the initial label value to be used of the label of the given cell is empty.
getEditingCell	Returns the cell that is currently being edited or null if no cell is being edited.
destroy	Destroys the editor and removes all associated resources.
mxCellRenderer	Renders cells into a document object model.
Functions
mxCellRenderer	arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
Variables
defaultShapes	Static array that contains the globally registered shapes which are known to all instances of this class.
defaultEdgeShape	Defines the default shape for edges.
defaultVertexShape	Defines the default shape for vertices.
defaultTextShape	Defines the default shape for labels.
legacyControlPosition	Specifies if the folding icon should ignore the horizontal orientation of a swimlane.
legacySpacing	Specifies if spacing and label position should be ignored if overflow is fill or width.
antiAlias	Anti-aliasing option for new shapes.
minSvgStrokeWidth	Minimum stroke width for SVG output.
forceControlClickHandler	Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
Functions
registerShape	Registers the given constructor under the specified key in this instance of the renderer.
initializeShape	Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
createShape	Creates and returns the shape for the given cell state.
createIndicatorShape	Creates the indicator shape for the given cell state.
getShape	Returns the shape for the given name from defaultShapes.
getShapeConstructor	Returns the constructor to be used for creating the shape.
configureShape	Configures the shape for the given cell state.
postConfigureShape	Replaces any reserved words used for attributes, eg.
checkPlaceholderStyles	Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
resolveColor	Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
getLabelValue	Returns the value to be used for the label.
createLabel	Creates the label for the given cell state.
initializeLabel	Initiailzes the label with a suitable container.
createCellOverlays	Creates the actual shape for showing the overlay for the given cell state.
initializeOverlay	Initializes the given overlay.
installOverlayListeners	Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
createControl	Creates the control for the given cell state.
createControlClickHandler	Hook for creating the click handler for the folding icon.
initControl	Initializes the given control and returns the corresponding DOM node.
isShapeEvent	Returns true if the event is for the shape of the given state.
isLabelEvent	Returns true if the event is for the label of the given state.
installListeners	Installs the event listeners for the given cell state.
redrawLabel	Redraws the label for the given cell state.
isTextShapeInvalid	Returns true if the style for the text shape has changed.
redrawLabelShape	Called to invoked redraw on the given text shape.
getTextScale	Returns the scaling used for the label of the given state
getLabelBounds	Returns the bounds to be used to draw the label of the given state.
rotateLabelBounds	Adds the shape rotation to the given label bounds and applies the alignment and offsets.
redrawCellOverlays	Redraws the overlays for the given cell state.
redrawControl	Redraws the control for the given cell state.
getControlBounds	Returns the bounds to be used to draw the control (folding icon) of the given state.
insertStateAfter	Inserts the given array of mxShapes after the given nodes in the DOM.
getShapesForState	Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
redraw	Updates the bounds or points and scale of the shapes for the given cell state.
redrawShape	Redraws the shape for the given cell state.
doRedrawShape	Invokes redraw on the shape of the given state.
isShapeInvalid	Returns true if the given shape must be repainted.
destroy	Destroys the shapes associated with the given cell state.
mxEdgeStyle	Provides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.
Functions
EntityRelation	Implements an entity relation style for edges (as used in database schema diagrams).
Loop	Implements a self-reference, aka.
ElbowConnector	Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSide	Implements a vertical elbow edge.
TopToBottom	Implements a horizontal elbow edge.
SegmentConnector	Implements an orthogonal edge style.
OrthConnector	Implements a local orthogonal router between the given cells.
mxStyleRegistry	Singleton class that acts as a global converter from string to object values in a style.
Variables
values	Maps from strings to objects.
Functions
putValue	Puts the given object into the registry under the given name.
getValue	Returns the value associated with the given name.
getName	Returns the name for the given value.
mxGraphView	Extends mxEventSource to implement a view for a graph.
Events
mxEvent.UNDO	Fires after the root was changed in setCurrentRoot.
mxEvent.SCALE_AND_TRANSLATE	Fires after the scale and translate have been changed in scaleAndTranslate.
mxEvent.SCALE	Fires after the scale was changed in setScale.
mxEvent.TRANSLATE	Fires after the translate was changed in setTranslate.
mxEvent.DOWN and mxEvent.UP	Fire if the current root is changed by executing an mxCurrentRootChange.
Functions
mxGraphView	Constructs a new view for the given mxGraph.
Variables
doneResource	Specifies the resource key for the status message after a long operation.
Functions
updatingDocumentResource	Specifies the resource key for the status message while the document is being updated.
Variables
allowEval	Specifies if string values in cell styles should be evaluated using mxUtils.eval.
captureDocumentGesture	Specifies if a gesture should be captured when it goes outside of the graph container.
optimizeVmlReflows	Specifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.
rendering	Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
graph	Reference to the enclosing mxGraph.
currentRoot	mxCell that acts as the root of the displayed cell hierarchy.
graphBounds	mxRectangle that caches the scales, translated bounds of the current view.
scale	Specifies the scale.
translate	mxPoint that specifies the current translation.
states	mxDictionary that maps from cell IDs to mxCellStates.
updateStyle	Specifies if the style should be updated in each validation step.
lastNode	During validation, this contains the last DOM node that was processed.
lastHtmlNode	During validation, this contains the last HTML DOM node that was processed.
lastForegroundNode	During validation, this contains the last edge’s DOM node that was processed.
lastForegroundHtmlNode	During validation, this contains the last edge HTML DOM node that was processed.
Functions
getGraphBounds	Returns graphBounds.
setGraphBounds	Sets graphBounds.
getBounds	Returns the union of all mxCellStates for the given array of mxCells.
setCurrentRoot	Sets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.
scaleAndTranslate	Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
getScale	Returns the scale.
setScale	Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
getTranslate	Returns the translate.
setTranslate	Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
viewStateChanged	Invoked after scale and/or translate has changed.
refresh	Clears the view if currentRoot is not null and revalidates.
revalidate	Revalidates the complete view with all cell states.
clear	Removes the state of the given cell and all descendants if the given cell is not the current root.
invalidate	Invalidates the state of the given cell, all its descendants and connected edges.
validate	Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
getEmptyBounds	Returns the bounds for an empty graph.
getBoundingBox	Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
createBackgroundPageShape	Creates and returns the shape used as the background page.
validateBackground	Calls validateBackgroundImage and validateBackgroundPage.
validateBackgroundImage	Validates the background image.
validateBackgroundPage	Validates the background page.
getBackgroundPageBounds	Returns the bounds for the background page.
redrawBackgroundImage	Updates the bounds and redraws the background image.
validateCell	Recursively creates the cell state for the given cell if visible is true and the given cell is visible.
validateCellState	Validates and repaints the mxCellState for the given mxCell.
updateCellState	Updates the given mxCellState.
isCellCollapsed	Returns true if the children of the given cell should not be visible in the view.
updateVertexState	Validates the given cell state.
updateEdgeState	Validates the given cell state.
updateVertexLabelOffset	Updates the absoluteOffset of the given vertex cell state.
resetValidationState	Resets the current validation state.
stateValidated	Invoked when a state has been processed in <validatePoints>.
updateFixedTerminalPoints	Sets the initial absolute terminal points in the given state before the edge style is computed.
updateFixedTerminalPoint	Sets the fixed source or target terminal point on the given edge.
getFixedTerminalPoint	Returns the fixed source or target terminal point for the given edge.
updateBoundsFromStencil	Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.
updatePoints	Updates the absolute points in the given state using the specified array of mxPoints as the relative points.
transformControlPoint	Transforms the given control point to an absolute point.
isLoopStyleEnabled	Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
getEdgeStyle	Returns the edge style function to be used to render the given edge state.
updateFloatingTerminalPoints	Updates the terminal points in the given state after the edge style was computed for the edge.
updateFloatingTerminalPoint	Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
getFloatingTerminalPoint	Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
getTerminalPort	Returns an mxCellState that represents the source or target terminal or port for the given edge.
getPerimeterPoint	Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.
getRoutingCenterX	Returns the x-coordinate of the center point for automatic routing.
getRoutingCenterY	Returns the y-coordinate of the center point for automatic routing.
getPerimeterBounds	Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
getPerimeterFunction	Returns the perimeter function for the given state.
getNextPoint	Returns the nearest point in the list of absolute points or the center of the opposite terminal.
getVisibleTerminal	Returns the nearest ancestor terminal that is visible.
updateEdgeBounds	Updates the given state using the bounding box of t he absolute points.
getPoint	Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
getRelativePoint	Gets the relative point that describes the given, absolute label position for the given edge state.
updateEdgeLabelOffset	Updates mxCellState.absoluteOffset for the given state.
getState	Returns the mxCellState for the given cell.
isRendering	Returns rendering.
setRendering	Sets rendering.
isAllowEval	Returns allowEval.
setAllowEval	Sets allowEval.
getStates	Returns states.
setStates	Sets states.
getCellStates	Returns the mxCellStates for the given array of mxCells.
removeState	Removes and returns the mxCellState for the given cell.
createState	Creates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.
getCanvas	Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
getBackgroundPane	Returns the DOM node that represents the background layer.
getDrawPane	Returns the DOM node that represents the main drawing layer.
getOverlayPane	Returns the DOM node that represents the layer above the drawing layer.
getDecoratorPane	Returns the DOM node that represents the topmost drawing layer.
isContainerEvent	Returns true if the event origin is one of the drawing panes or containers of the view.
isScrollEvent	Returns true if the event origin is one of the scrollbars of the container in IE.
init	Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.
installListeners	Installs the required listeners in the container.
create	Creates the DOM nodes for the HTML display.
updateHtmlCanvasSize	Updates the size of the HTML canvas.
createHtmlPane	Creates and returns a drawing pane in HTML (DIV).
create	Creates the DOM nodes for the VML display.
createVmlPane	Creates a drawing pane in VML (group).
create	Creates and returns the DOM nodes for the SVG display.
updateContainerStyle	Updates the style of the container after installing the SVG DOM elements.
destroy	Destroys the view and all its resources.
mxCurrentRootChange	Action to change the current root in a view.
Functions
mxCurrentRootChange	Constructs a change of the current root in the given view.
execute	Changes the current root of the view.
mxGraph	Extends mxEventSource to implement a graph component for the browser.
Events
mxEvent.ROOT	Fires if the root in the model has changed.
mxEvent.ALIGN_CELLS	Fires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGE	Fires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLS	Fires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDERED	Fires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLS	Fires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLS	Fires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENT	Fires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLS	Fires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDED	Fires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLS	Fires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVED	Fires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGE	Fires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLS	Fires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLS	Fires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDED	Fires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZE	Fires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLS	Fires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZED	Fires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLS	Fires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVED	Fires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELL	Fires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTED	Fires between begin- and endUpdate in cellConnected.
mxEvent.REFRESH	Fires after refresh was executed.
mxEvent.CLICK	Fires in click after a click event.
mxEvent.DOUBLE_CLICK	Fires in dblClick after a double click.
mxEvent.GESTURE	Fires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLD	Fires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENT	Fires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZE	Fires after sizeDidChange was executed.
mxEvent.START_EDITING	Fires before the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STARTED	Fires after the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STOPPED	Fires after the in-place editor stops in stopEditing.
mxEvent.LABEL_CHANGED	Fires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAY	Fires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAY	Fires after an overlay is removed in removeCellOverlay and removeCellOverlays.
mxGraph	Constructs a new mxGraph in the specified container.
Variables
mouseListeners	Holds the mouse event listeners.
isMouseDown	Holds the state of the mouse button.
model	Holds the mxGraphModel that contains the cells to be displayed.
view	Holds the mxGraphView that caches the mxCellStates for the cells.
stylesheet	Holds the mxStylesheet that defines the appearance of the cells.
selectionModel	Holds the mxGraphSelectionModel that models the current selection.
cellEditor	Holds the mxCellEditor that is used as the in-place editing.
cellRenderer	Holds the mxCellRenderer for rendering the cells in the graph.
multiplicities	An array of mxMultiplicities describing the allowed connections in a graph.
renderHint	RenderHint as it was passed to the constructor.
dialect	Dialect to be used for drawing the graph.
gridSize	Specifies the grid size.
gridEnabled	Specifies if the grid is enabled.
portsEnabled	Specifies if ports are enabled.
nativeDoubleClickEnabled	Specifies if native double click events should be detected.
doubleTapEnabled	Specifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeout	Specifies the timeout for double taps and non-native double clicks.
doubleTapTolerance	Specifies the tolerance for double taps and double clicks in quirks mode.
lastTouchX	Holds the x-coordinate of the last touch event for double tap detection.
lastTouchX	Holds the y-coordinate of the last touch event for double tap detection.
lastTouchTime	Holds the time of the last touch event for double click detection.
tapAndHoldEnabled	Specifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelay	Specifies the time for a tap and hold.
tapAndHoldInProgress	True if the timer for tap and hold events is running.
tapAndHoldValid	True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchX	Holds the x-coordinate of the intial touch event for tap and hold.
initialTouchY	Holds the y-coordinate of the intial touch event for tap and hold.
tolerance	Tolerance for a move to be handled as a single click.
defaultOverlap	Value returned by getOverlap if isAllowOverlapParent returns true for the given cell.
defaultParent	Specifies the default parent to be used to insert new cells.
alternateEdgeStyle	Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
backgroundImage	Specifies the mxImage to be returned by getBackgroundImage.
pageVisible	Specifies if the background page should be visible.
pageBreaksVisible	Specifies if a dashed line should be drawn between multiple pages.
pageBreakColor	Specifies the color for page breaks.
pageBreakDashed	Specifies the page breaks should be dashed.
minPageBreakDist	Specifies the minimum distance for page breaks to be visible.
preferPageSize	Specifies if the graph size should be rounded to the next page number in sizeDidChange.
pageFormat	Specifies the page format for the background page.
pageScale	Specifies the scale of the background page.
enabled	Specifies the return value for isEnabled.
escapeEnabled	Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
invokesStopCellEditing	If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
enterStopsCellEditing	If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
useScrollbarsForPanning	Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
exportEnabled	Specifies the return value for canExportCell.
importEnabled	Specifies the return value for canImportCell.
cellsLocked	Specifies the return value for isCellLocked.
cellsCloneable	Specifies the return value for isCellCloneable.
foldingEnabled	Specifies if folding (collapse and expand via an image icon in the graph should be enabled).
cellsEditable	Specifies the return value for isCellEditable.
cellsDeletable	Specifies the return value for isCellDeletable.
cellsMovable	Specifies the return value for isCellMovable.
edgeLabelsMovable	Specifies the return value for edges in isLabelMovable.
vertexLabelsMovable	Specifies the return value for vertices in isLabelMovable.
dropEnabled	Specifies the return value for isDropEnabled.
splitEnabled	Specifies if dropping onto edges should be enabled.
cellsResizable	Specifies the return value for isCellResizable.
cellsBendable	Specifies the return value for isCellsBendable.
cellsSelectable	Specifies the return value for isCellSelectable.
cellsDisconnectable	Specifies the return value for <isCellDisconntable>.
autoSizeCells	Specifies if the graph should automatically update the cell size after an edit.
autoSizeCellsOnAdd	Specifies if autoSize style should be applied when cells are added.
autoScroll	Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
ignoreScrollbars	Specifies if the graph should automatically scroll regardless of the scrollbars.
translateToScrollPosition	Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
timerAutoScroll	Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
allowAutoPanning	Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
autoExtend	Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
maximumGraphBounds	mxRectangle that specifies the area in which all cells in the diagram should be placed.
minimumGraphSize	mxRectangle that specifies the minimum size of the graph.
minimumContainerSize	mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSize	mxRectangle that specifies the maximum size of the container if resizeContainer is true.
resizeContainer	Specifies if the container should be resized to the graph size when the graph size has changed.
border	Border to be added to the bottom and right side when the container is being resized after the graph has been changed.
keepEdgesInForeground	Specifies if edges should appear in the foreground regardless of their order in the model.
keepEdgesInBackground	Specifies if edges should appear in the background regardless of their order in the model.
allowNegativeCoordinates	Specifies if negative coordinates for vertices are allowed.
constrainChildren	Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.
constrainRelativeChildren	Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
extendParents	Specifies if a parent should contain the child bounds after a resize of the child.
extendParentsOnAdd	Specifies if parents should be extended according to the extendParents switch if cells are added.
extendParentsOnAdd	Specifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResize	Specifies the return value for isRecursiveResize.
collapseToPreferredSize	Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.
zoomFactor	Specifies the factor used for zoomIn and zoomOut.
keepSelectionVisibleOnZoom	Specifies if the viewport should automatically contain the selection cells after a zoom operation.
centerZoom	Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
resetViewOnRootChange	Specifies if the scale and translate should be reset if the root changes in the model.
resetEdgesOnResize	Specifies if edge control points should be reset after the resize of a connected cell.
resetEdgesOnMove	Specifies if edge control points should be reset after the move of a connected cell.
resetEdgesOnConnect	Specifies if edge control points should be reset after the the edge has been reconnected.
allowLoops	Specifies if loops (aka self-references) are allowed.
defaultLoopStyle	mxEdgeStyle to be used for loops.
multigraph	Specifies if multiple edges in the same direction between the same pair of vertices are allowed.
connectableEdges	Specifies if edges are connectable.
allowDanglingEdges	Specifies if edges with disconnected terminals are allowed in the graph.
cloneInvalidEdges	Specifies if edges that are cloned should be validated and only inserted if they are valid.
disconnectOnMove	Specifies if edges should be disconnected from their terminals when they are moved.
labelsVisible	Specifies if labels should be visible.
htmlLabels	Specifies the return value for isHtmlLabel.
swimlaneSelectionEnabled	Specifies if swimlanes should be selectable via the content if the mouse is released.
swimlaneNesting	Specifies if nesting of swimlanes is allowed.
swimlaneIndicatorColorAttribute	The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
imageBundles	Holds the list of image bundles.
minFitScale	Specifies the minimum scale to be applied in fit.
maxFitScale	Specifies the maximum scale to be applied in fit.
panDx	Current horizontal panning value.
panDy	Current vertical panning value.
collapsedImage	Specifies the mxImage to indicate a collapsed state.
expandedImage	Specifies the mxImage to indicate a expanded state.
warningImage	Specifies the mxImage for the image to be used to display a warning overlay.
alreadyConnectedResource	Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
containsValidationErrorsResource	Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
collapseExpandResource	Specifies the resource key for the tooltip on the collapse/expand icon.
init	Initializes the <container> and creates the respective datastructures.
createHandlers	Creates the tooltip-, panning-, connection- and graph-handler (in this order).
createTooltipHandler	Creates and returns a new mxTooltipHandler to be used in this graph.
createSelectionCellsHandler	Creates and returns a new mxTooltipHandler to be used in this graph.
createConnectionHandler	Creates and returns a new mxConnectionHandler to be used in this graph.
createGraphHandler	Creates and returns a new mxGraphHandler to be used in this graph.
createPanningHandler	Creates and returns a new mxPanningHandler to be used in this graph.
createPopupMenuHandler	Creates and returns a new mxPopupMenuHandler to be used in this graph.
createSelectionModel	Creates a new mxGraphSelectionModel to be used in this graph.
createStylesheet	Creates a new mxGraphSelectionModel to be used in this graph.
createGraphView	Creates a new mxGraphView to be used in this graph.
createCellRenderer	Creates a new mxCellRenderer to be used in this graph.
createCellEditor	Creates a new mxCellEditor to be used in this graph.
getModel	Returns the mxGraphModel that contains the cells.
getView	Returns the mxGraphView that contains the mxCellStates.
getStylesheet	Returns the mxStylesheet that defines the style.
setStylesheet	Sets the mxStylesheet that defines the style.
getSelectionModel	Returns the mxGraphSelectionModel that contains the selection.
setSelectionModel	Sets the <mxSelectionModel> that contains the selection.
getSelectionCellsForChanges	Returns the cells to be selected for the given array of changes.
graphModelChanged	Called when the graph model changes.
updateSelection	Removes selection cells that are not in the model from the selection.
processChange	Processes the given change and invalidates the respective cached data in view.
removeStateForCell	Removes all cached information for the given cell and its descendants.
Overlays
addCellOverlay	Adds an mxCellOverlay for the specified cell.
getCellOverlays	Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
removeCellOverlay	Removes and returns the given mxCellOverlay from the given cell.
removeCellOverlays	Removes all mxCellOverlays from the given cell.
clearCellOverlays	Removes all mxCellOverlays in the graph for the given cell and all its descendants.
setCellWarning	Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
In-place editing
startEditing	Calls startEditingAtCell using the given cell or the first selection cell.
startEditingAtCell	Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
getEditingValue	Returns the initial value for in-place editing.
stopEditing	Stops the current editing and fires a <editingStopped> event.
labelChanged	Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
cellLabelChanged	Sets the new label for a cell.
Event processing
escape	Processes an escape keystroke.
click	Processes a singleclick on an optional cell and fires a click event.
dblClick	Processes a doubleclick on an optional cell and fires a <dblclick> event.
tapAndHold	Handles the mxMouseEvent by highlighting the mxCellState.
scrollPointToVisible	Scrolls the graph to the given point, extending the graph container if specified.
createPanningManager	Creates and returns an mxPanningManager.
getBorderSizes	Returns the size of the border and padding on all four sides of the container.
getPreferredPageSize	Returns the preferred size of the background page if preferPageSize is true.
fit	Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view.
sizeDidChange	Called when the size of the graph has changed.
doResizeContainer	Resizes the container for the given graph width and height.
updatePageBreaks	Invokes from sizeDidChange to redraw the page breaks.
Cell styles
getCellStyle	Returns an array of key, value pairs representing the cell style for the given cell.
postProcessCellStyle	Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
setCellStyle	Sets the style of the specified cells.
toggleCellStyle	Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
toggleCellStyles	Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
setCellStyles	Sets the key to value in the styles of the given cells.
toggleCellStyleFlags	Toggles the given bit for the given key in the styles of the specified cells.
setCellStyleFlags	Sets or toggles the given bit for the given key in the styles of the specified cells.
Cell alignment and orientation
alignCells	Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
flipEdge	Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.
addImageBundle	Adds the specified mxImageBundle.
removeImageBundle	Removes the specified mxImageBundle.
getImageFromBundles	Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
Order
orderCells	Moves the given cells to the front or back.
cellsOrdered	Moves the given cells to the front or back.
Grouping
groupCells	Adds the cells into the given group.
getCellsForGroup	Returns the cells with the same parent as the first cell in the given array.
getBoundsForGroup	Returns the bounds to be used for the given group and children.
createGroupCell	Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
ungroupCells	Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.
removeCellsAfterUngroup	Hook to remove the groups after ungroupCells.
removeCellsFromParent	Removes the specified cells from their parents and adds them to the default parent.
updateGroupBounds	Updates the bounds of the given groups to include all children and returns the passed-in cells.
getBoundingBox	Returns the bounding box for the given array of mxCells.
Cell cloning, insertion and removal
cloneCell	Returns the clone for the given cell.
cloneCells	Returns the clones for the given cells.
insertVertex	Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
createVertex	Hook method that creates the new vertex for insertVertex.
insertEdge	Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
createEdge	Hook method that creates the new edge for insertEdge.
addEdge	Adds the edge to the parent and connects it to the given source and target terminals.
addCell	Adds the cell to the parent and connects it to the given source and target terminals.
addCells	Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
cellsAdded	Adds the specified cells to the given parent.
autoSizeCell	Resizes the specified cell to just fit around the its label and/or children
removeCells	Removes the given cells from the graph including all connected edges if includeEdges is true.
cellsRemoved	Removes the given cells from the model.
splitEdge	Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
Cell visibility
toggleCells	Sets the visible state of the specified cells and all connected edges if includeEdges is true.
cellsToggled	Sets the visible state of the specified cells.
Folding
foldCells	Sets the collapsed state of the specified cells and all descendants if recurse is true.
cellsFolded	Sets the collapsed state of the specified cells.
swapBounds	Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
updateAlternateBounds	Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
addAllEdges	Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.
getAllEdges	Returns all edges connected to the given cells or its descendants.
Cell sizing
updateCellSize	Updates the size of the given cell in the model using cellSizeUpdated.
cellSizeUpdated	Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
getPreferredSizeForCell	Returns the preferred width and height of the given mxCell as an mxRectangle.
resizeCell	Sets the bounds of the given cell using resizeCells.
resizeCells	Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
cellsResized	Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
cellResized	Resizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCells	Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCells	Constrains the children of the given cell using constrainChild.
scaleCell	Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
extendParent	Resizes the parents recursively so that they contain the complete area of the resized child cell.
Cell moving
importCells	Clones and inserts the given cells into the graph using the move method and returns the inserted cells.
moveCells	Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
cellsMoved	Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
translateCell	Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
getCellContainmentArea	Returns the mxRectangle inside which a cell is to be kept.
getMaximumGraphBounds	Returns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChild	Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
resetEdges	Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
resetEdge	Resets the control points of the given edge.
Cell connecting and connection constraints
getOutlineConstraint	Returns the constraint used to connect to the outline of the given state.
getAllConnectionConstraints	Returns an array of all mxConnectionConstraints for the given terminal.
getConnectionConstraint	Returns an mxConnectionConstraint that describes the given connection point.
setConnectionConstraint	Sets the mxConnectionConstraint that describes the given connection point.
getConnectionPoint	Returns the nearest point in the list of absolute points or the center of the opposite terminal.
connectCell	Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
cellConnected	Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
disconnectGraph	Disconnects the given edges from the terminals which are not in the given array.
Drilldown
getCurrentRoot	Returns the current root of the displayed cell hierarchy.
getTranslateForRoot	Returns the translation to be used if the given cell is the root cell as an mxPoint.
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
getTerminalForPort	Returns the terminal to be used for a given port.
getChildOffsetForCell	Returns the offset to be used for the cells inside the given cell.
enterGroup	Uses the given cell as the root of the displayed cell hierarchy.
exitGroup	Changes the current root to the next valid root in the displayed cell hierarchy.
home	Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
isValidRoot	Returns true if the given cell is a valid root for the cell display hierarchy.
Graph display
getGraphBounds	Returns the bounds of the visible graph.
getCellBounds	Returns the scaled, translated bounds for the given cell.
getBoundingBoxFromGeometry	Returns the bounding box for the geometries of the vertices in the given array of cells.
refresh	Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
snap	Snaps the given numeric value to the grid if gridEnabled is true.
panGraph	Shifts the graph display by the given amount.
zoomIn	Zooms into the graph by zoomFactor.
zoomOut	Zooms out of the graph by zoomFactor.
zoomActual	Resets the zoom and panning in the view.
zoomTo	Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
center	Centers the graph in the container.
zoom	Zooms the graph using the given factor.
zoomToRect	Zooms the graph to the specified rectangle.
scrollCellToVisible	Pans the graph so that it shows the given cell.
scrollRectToVisible	Pans the graph so that it shows the given rectangle.
getCellGeometry	Returns the mxGeometry for the given cell.
isCellVisible	Returns true if the given cell is visible in this graph.
isCellCollapsed	Returns true if the given cell is collapsed in this graph.
isCellConnectable	Returns true if the given cell is connectable in this graph.
isOrthogonal	Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
isLoop	Returns true if the given cell state is a loop.
isCloneEvent	Returns true if the given event is a clone event.
isTransparentClickEvent	Hook for implementing click-through behaviour on selected cells.
isToggleEvent	Returns true if the given event is a toggle event.
isGridEnabledEvent	Returns true if the given mouse event should be aligned to the grid.
isConstrainedEvent	Returns true if the given mouse event should be aligned to the grid.
isIgnoreTerminalEvent	Returns true if the given mouse event should not allow any connections to be made.
Validation
validationAlert	Displays the given validation error in a dialog.
isEdgeValid	Checks if the return value of getEdgeValidationError for the given arguments is null.
getEdgeValidationError	Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
validateEdge	Hook method for subclassers to return an error message for the given edge and terminals.
validateGraph	Validates the graph by validating each descendant of the given cell or the root of the model.
getCellValidationError	Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
validateCell	Hook method for subclassers to return an error message for the given cell and validation context.
Graph appearance
getBackgroundImage	Returns the backgroundImage as an mxImage.
setBackgroundImage	Sets the new backgroundImage.
getFoldingImage	Returns the mxImage used to display the collapsed state of the specified cell state.
convertValueToString	Returns the textual representation for the given cell.
getLabel	Returns a string or DOM node that represents the label for the given cell.
isHtmlLabel	Returns true if the label must be rendered as HTML markup.
isHtmlLabels	Returns htmlLabels.
setHtmlLabels	Sets htmlLabels.
isWrapping	This enables wrapping for HTML labels.
isLabelClipped	Returns true if the overflow portion of labels should be hidden.
getTooltip	Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
getTooltipForCell	Returns the string or DOM node to be used as the tooltip for the given cell.
getLinkForCell	Returns the string to be used as the link for the given cell.
getCursorForMouseEvent	Returns the cursor value to be used for the CSS of the shape for the given event.
getCursorForCell	Returns the cursor value to be used for the CSS of the shape for the given cell.
getStartSize	Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
getImage	Returns the image URL for the given cell state.
getVerticalAlign	Returns the vertical alignment for the given cell state.
getIndicatorColor	Returns the indicator color for the given cell state.
getIndicatorGradientColor	Returns the indicator gradient color for the given cell state.
getIndicatorShape	Returns the indicator shape for the given cell state.
getIndicatorImage	Returns the indicator image for the given cell state.
getBorder	Returns the value of border.
setBorder	Sets the value of border.
isSwimlane	Returns true if the given cell is a swimlane in the graph.
Graph behaviour
isResizeContainer	Returns resizeContainer.
setResizeContainer	Sets resizeContainer.
isEnabled	Returns true if the graph is enabled.
setEnabled	Specifies if the graph should allow any interactions.
isEscapeEnabled	Returns escapeEnabled.
setEscapeEnabled	Sets escapeEnabled.
isInvokesStopCellEditing	Returns invokesStopCellEditing.
setInvokesStopCellEditing	Sets invokesStopCellEditing.
isEnterStopsCellEditing	Returns enterStopsCellEditing.
setEnterStopsCellEditing	Sets enterStopsCellEditing.
isCellLocked	Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
isCellsLocked	Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
setCellsLocked	Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
getCloneableCells	Returns the cells which may be exported in the given array of cells.
isCellCloneable	Returns true if the given cell is cloneable.
isCellsCloneable	Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneable	Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
getExportableCells	Returns the cells which may be exported in the given array of cells.
canExportCell	Returns true if the given cell may be exported to the clipboard.
getImportableCells	Returns the cells which may be imported in the given array of cells.
canImportCell	Returns true if the given cell may be imported from the clipboard.
isCellSelectable	Returns true if the given cell is selectable.
isCellsSelectable	Returns cellsSelectable.
setCellsSelectable	Sets cellsSelectable.
getDeletableCells	Returns the cells which may be exported in the given array of cells.
isCellDeletable	Returns true if the given cell is moveable.
isCellsDeletable	Returns cellsDeletable.
setCellsDeletable	Sets cellsDeletable.
isLabelMovable	Returns true if the given edges’s label is moveable.
isCellRotatable	Returns true if the given cell is rotatable.
getMovableCells	Returns the cells which are movable in the given array of cells.
isCellMovable	Returns true if the given cell is moveable.
isCellsMovable	Returns cellsMovable.
setCellsMovable	Specifies if the graph should allow moving of cells.
isGridEnabled	Returns gridEnabled as a boolean.
setGridEnabled	Specifies if the grid should be enabled.
isPortsEnabled	Returns portsEnabled as a boolean.
setPortsEnabled	Specifies if the ports should be enabled.
getGridSize	Returns gridSize.
setGridSize	Sets gridSize.
getTolerance	Returns tolerance.
setTolerance	Sets tolerance.
isVertexLabelsMovable	Returns vertexLabelsMovable.
setVertexLabelsMovable	Sets vertexLabelsMovable.
isEdgeLabelsMovable	Returns edgeLabelsMovable.
isEdgeLabelsMovable	Sets edgeLabelsMovable.
isSwimlaneNesting	Returns swimlaneNesting as a boolean.
setSwimlaneNesting	Specifies if swimlanes can be nested by drag and drop.
isSwimlaneSelectionEnabled	Returns swimlaneSelectionEnabled as a boolean.
setSwimlaneSelectionEnabled	Specifies if swimlanes should be selected if the mouse is released over their content area.
isMultigraph	Returns multigraph as a boolean.
setMultigraph	Specifies if the graph should allow multiple connections between the same pair of vertices.
isAllowLoops	Returns allowLoops as a boolean.
setAllowDanglingEdges	Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
isAllowDanglingEdges	Returns allowDanglingEdges as a boolean.
setConnectableEdges	Specifies if edges should be connectable.
isConnectableEdges	Returns connectableEdges as a boolean.
setCloneInvalidEdges	Specifies if edges should be inserted when cloned but not valid wrt.
isCloneInvalidEdges	Returns cloneInvalidEdges as a boolean.
setAllowLoops	Specifies if loops are allowed.
isDisconnectOnMove	Returns disconnectOnMove as a boolean.
setDisconnectOnMove	Specifies if edges should be disconnected when moved.
isDropEnabled	Returns dropEnabled as a boolean.
setDropEnabled	Specifies if the graph should allow dropping of cells onto or into other cells.
isSplitEnabled	Returns splitEnabled as a boolean.
setSplitEnabled	Specifies if the graph should allow dropping of cells onto or into other cells.
isCellResizable	Returns true if the given cell is resizable.
isCellsResizable	Returns cellsResizable.
setCellsResizable	Specifies if the graph should allow resizing of cells.
isTerminalPointMovable	Returns true if the given terminal point is movable.
isCellBendable	Returns true if the given cell is bendable.
isCellsBendable	Returns <cellsBenadable>.
setCellsBendable	Specifies if the graph should allow bending of edges.
isCellEditable	Returns true if the given cell is editable.
isCellsEditable	Returns cellsEditable.
setCellsEditable	Specifies if the graph should allow in-place editing for cell labels.
isCellDisconnectable	Returns true if the given cell is disconnectable from the source or target terminal.
isCellsDisconnectable	Returns cellsDisconnectable.
setCellsDisconnectable	Sets cellsDisconnectable.
isValidSource	Returns true if the given cell is a valid source for new connections.
isValidTarget	Returns isValidSource for the given cell.
isValidConnection	Returns true if the given target cell is a valid target for source.
setConnectable	Specifies if the graph should allow new connections.
isConnectable	Returns true if the <connectionHandler> is enabled.
setTooltips	Specifies if tooltips should be enabled.
setPanning	Specifies if panning should be enabled.
isEditing	Returns true if the given cell is currently being edited.
isAutoSizeCell	Returns true if the size of the given cell should automatically be updated after a change of the label.
isAutoSizeCells	Returns autoSizeCells.
setAutoSizeCells	Specifies if cell sizes should be automatically updated after a label change.
isExtendParent	Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
isExtendParents	Returns extendParents.
setExtendParents	Sets extendParents.
isExtendParentsOnAdd	Returns extendParentsOnAdd.
setExtendParentsOnAdd	Sets extendParentsOnAdd.
isExtendParentsOnMove	Returns <extendParentsOnMove>.
setExtendParentsOnMove	Sets <extendParentsOnMove>.
isRecursiveResize	Returns recursiveResize.
setRecursiveResize	Sets recursiveResize.
isConstrainChild	Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
isConstrainChildren	Returns constrainChildren.
setConstrainChildren	Sets constrainChildren.
isConstrainRelativeChildren	Returns constrainRelativeChildren.
setConstrainRelativeChildren	Sets constrainRelativeChildren.
isConstrainChildren	Returns allowNegativeCoordinates.
setConstrainChildren	Sets allowNegativeCoordinates.
getOverlap	Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
isAllowOverlapParent	Returns true if the given cell is allowed to be placed outside of the parents area.
getFoldableCells	Returns the cells which are movable in the given array of cells.
isCellFoldable	Returns true if the given cell is foldable.
isValidDropTarget	Returns true if the given cell is a valid drop target for the specified cells.
isSplitTarget	Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
getDropTarget	Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
Cell retrieval
getDefaultParent	Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
setDefaultParent	Sets the defaultParent to the given cell.
getSwimlane	Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
getSwimlaneAt	Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
getCellAt	Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
intersects	Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
hitsSwimlaneContent	Returns true if the given coordinate pair is inside the content are of the given swimlane.
getChildVertices	Returns the visible child vertices of the given parent.
getChildEdges	Returns the visible child edges of the given parent.
getChildCells	Returns the visible child vertices or edges in the given parent.
getConnections	Returns all visible edges connected to the given cell without loops.
getIncomingEdges	Returns the visible incoming edges for the given cell.
getOutgoingEdges	Returns the visible outgoing edges for the given cell.
getEdges	Returns the incoming and/or outgoing edges for the given cell.
isValidAncestor	Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
getOpposites	Returns all distinct visible opposite cells for the specified terminal on the given edges.
getEdgesBetween	Returns the edges between the given source and target.
getPointForEvent	Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
getCells	Returns the child vertices and edges of the given parent that are contained in the given rectangle.
getCellsBeyond	Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
findTreeRoots	Returns all children in the given parent which do not have incoming edges.
traverse	Traverses the (directed) graph invoking the given function for each visited vertex and edge.
Selection
isCellSelected	Returns true if the given cell is selected.
isSelectionEmpty	Returns true if the selection is empty.
clearSelection	Clears the selection using mxGraphSelectionModel.clear.
getSelectionCount	Returns the number of selected cells.
getSelectionCell	Returns the first cell from the array of selected mxCells.
getSelectionCells	Returns the array of selected mxCells.
setSelectionCell	Sets the selection cell.
setSelectionCells	Sets the selection cell.
addSelectionCell	Adds the given cell to the selection.
addSelectionCells	Adds the given cells to the selection.
removeSelectionCell	Removes the given cell from the selection.
removeSelectionCells	Removes the given cells from the selection.
selectRegion	Selects and returns the cells inside the given rectangle for the specified event.
selectNextCell	Selects the next cell.
selectPreviousCell	Selects the previous cell.
selectParentCell	Selects the parent cell.
selectChildCell	Selects the first child cell.
selectCell	Selects the next, parent, first child or previous cell, if all arguments are false.
selectAll	Selects all children of the given parent cell or the children of the default parent if no parent is specified.
selectVertices	Select all vertices inside the given parent or the default parent.
selectVertices	Select all vertices inside the given parent or the default parent.
selectCells	Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
selectCellForEvent	Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
selectCellsForEvent	Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Selection state
createHandler	Creates a new handler for the given cell state.
createVertexHandler	Hooks to create a new mxVertexHandler for the given mxCellState.
createEdgeHandler	Hooks to create a new mxEdgeHandler for the given mxCellState.
createEdgeSegmentHandler	Hooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.
createElbowEdgeHandler	Hooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph events
addMouseListener	Adds a listener to the graph event dispatch loop.
removeMouseListener	Removes the specified graph listener.
updateMouseEvent	Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
getStateForEvent	Returns the state for the given touch event.
isEventIgnored	Returns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnored	Hook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnored	Returns true if the event should be ignored in fireMouseEvent.
getEventState	Returns the mxCellState to be used when firing the mouse event for the given state.
fireMouseEvent	Dispatches the given event in the graph event dispatch loop.
consumeMouseEvent	Consumes the given mxMouseEvent if it’s a touchStart event.
fireGestureEvent	Dispatches a mxEvent.GESTURE event.
destroy	Destroys the graph and all its resources.
mxCellOverlay	Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip.
Events
mxEvent.CLICK	Fires when the user clicks on the overlay.
Functions
mxCellOverlay	Constructs a new overlay using the given image and tooltip.
Variables
image	Holds the mxImage to be used as the icon.
tooltip	Holds the optional string to be used as the tooltip.
align	Holds the horizontal alignment for the overlay.
verticalAlign	Holds the vertical alignment for the overlay.
offset	Holds the offset as an mxPoint.
cursor	Holds the cursor for the overlay.
defaultOverlap	Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
Functions
getBounds	Returns the bounds of the overlay for the given mxCellState as an mxRectangle.
toString	Returns the textual representation of the overlay to be used as the tooltip.
mxOutline	Implements an outline (aka overview) for a graph.
Functions
mxOutline	Constructs a new outline for the specified graph inside the given container.
source	Reference to the source mxGraph.
outline	Reference to the mxGraph that renders the outline.
graphRenderHint	Renderhint to be used for the outline graph.
Variables
enabled	Specifies if events are handled.
showViewport	Specifies a viewport rectangle should be shown.
border	Border to be added at the bottom and right.
enabled	Specifies the size of the sizer handler.
labelsVisible	Specifies if labels should be visible in the outline.
updateOnPan	Specifies if update should be called for mxEvent.PAN in the source graph.
sizerImage	Optional mxImage to be used for the sizer.
minScale	Minimum scale to be used.
suspended	Optional boolean flag to suspend updates.
forceVmlHandles	Specifies if VML should be used to render the handles in this control.
Functions
createGraph	Creates the mxGraph used in the outline.
init	Initializes the outline inside the given container.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
setZoomEnabled	Enables or disables the zoom handling by showing or hiding the respective handle.
refresh	Invokes update and revalidate the outline.
createSizer	Creates the shape used as the sizer.
getSourceContainerSize	Returns the size of the source container.
getOutlineOffset	Returns the offset for drawing the outline graph.
getOutlineOffset	Returns the offset for drawing the outline graph.
update	Updates the outline.
mouseDown	Handles the event by starting a translation or zoom.
mouseMove	Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.
getTranslateForEvent	Gets the translate for the given mouse event.
mouseUp	Handles the event by applying the translation or zoom to <graph>.
destroy	Destroy this outline and removes all listeners from source.
mxMultiplicity	Defines invalid connections along with the error messages that they produce.
Functions
mxMultiplicity	Instantiate class mxMultiplicity in order to describe allowed connections in a graph.
Variables
type	Defines the type of the source or target terminal.
attr	Optional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.
value	Optional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.
source	Boolean that specifies if the rule is applied to the source or target terminal of an edge.
min	Defines the minimum number of connections for which this rule applies.
max	Defines the maximum number of connections for which this rule applies.
validNeighbors	Holds an array of strings that specify the type of neighbor for which this rule applies.
validNeighborsAllowed	Boolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.
countError	Holds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.
typeError	Holds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.
Functions
check	Checks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.
checkNeighbors	Checks if there are any valid neighbours in validNeighbors.
checkTerminal	Checks the given terminal cell and returns true if this rule applies.
checkType	Checks the type of the given value.
mxLayoutManager
Events
mxEvent.LAYOUT_CELLS	Fires between begin- and endUpdate after all cells have been layouted in layoutCells.
Functions
mxLayoutManager	Constructs a new automatic layout for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
bubbling	Specifies if the layout should bubble along the cell hierarchy.
enabled	Specifies if event handling is enabled.
updateHandler	Holds the function that handles the endUpdate event.
moveHandler	Holds the function that handles the move event.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isBubbling	Returns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.
setBubbling	Sets bubbling.
getGraph	Returns the graph that this layout operates on.
setGraph	Sets the graph that the layouts operate on.
getLayout	Returns the layout to be executed for the given graph and parent.
beforeUndo	Called from the undoHandler.
executeLayout	Executes the given layout on the given parent.
cellsMoved	Called from the moveHandler.
getCellsForEdit	Returns the cells to be layouted for the given sequence of changes.
getCellsForChange	Executes all layouts which have been scheduled during the changes.
layoutCells	Executes all layouts which have been scheduled during the changes.
executeLayout	Executes the given layout on the given parent.
destroy	Removes all handlers from the graph and deletes the reference to it.
mxSwimlaneManager	Manager for swimlanes and nested swimlanes that sets the size of newly added swimlanes to that of their siblings, and propagates changes to the size of a swimlane to its siblings, if <siblings> is true, and its ancestors, if <bubbling> is true.
Functions
mxSwimlaneManager	Constructs a new swimlane manager for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
enabled	Specifies if event handling is enabled.
horizontal	Specifies the orientation of the swimlanes.
addEnabled	Specifies if newly added cells should be resized to match the size of their existing siblings.
resizeEnabled	Specifies if resizing of swimlanes should be handled.
moveHandler	Holds the function that handles the move event.
moveHandler	Holds the function that handles the move event.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isHorizontal	Returns horizontal.
setHorizontal	Sets horizontal.
isAddEnabled	Returns addEnabled.
setAddEnabled	Sets addEnabled.
isResizeEnabled	Returns resizeEnabled.
setResizeEnabled	Sets resizeEnabled.
getGraph	Returns the graph that this manager operates on.
setGraph	Sets the graph that the manager operates on.
isSwimlaneIgnored	Returns true if the given swimlane should be ignored.
isCellHorizontal	Returns true if the given cell is horizontal.
cellsAdded	Called if any cells have been added.
swimlaneAdded	Updates the size of the given swimlane to match that of any existing siblings swimlanes.
cellsResized	Called if any cells have been resizes.
resizeSwimlane	Called from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.
destroy	Removes all handlers from the graph and deletes the reference to it.
mxTemporaryCellStates	Creates a temporary set of cell states.
Variables
view	Holds the width of the rectangle.
oldStates	Holds the height of the rectangle.
oldBounds	Holds the height of the rectangle.
oldScale	Holds the height of the rectangle.
Functions
destroy	Returns the top, left corner as a new mxPoint.
mxCellStatePreview	Implements a live preview for moving cells.
Functions
mxCellStatePreview	Constructs a move preview for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
deltas	Reference to the enclosing mxGraph.
count	Contains the number of entries in the map.
Functions
isEmpty	Returns true if this contains no entries.
moveState
show
translateState
revalidateState
addEdges
mxConnectionConstraint	Defines an object that contains the constraints about how to connect one side of an edge to its terminal.
Functions
mxConnectionConstraint	Constructs a new connection constraint for the given point and boolean arguments.
Variables
point	mxPoint that specifies the fixed location of the connection point.
perimeter	Boolean that specifies if the point should be projected onto the perimeter of the terminal.
name	Optional string that specifies the name of the constraint.
dx	Optional float that specifies the horizontal offset of the constraint.
dy	Optional float that specifies the vertical offset of the constraint.
mxGraphHandler	Graph event handler that handles selection.
Functions
mxGraphHandler	Constructs an event handler that creates handles for the selection cells.
Variables
graph	Reference to the enclosing mxGraph.
maxCells	Defines the maximum number of cells to paint subhandles for.
enabled	Specifies if events are handled.
highlightEnabled	Specifies if drop targets under the mouse should be enabled.
cloneEnabled	Specifies if cloning by control-drag is enabled.
moveEnabled	Specifies if moving is enabled.
guidesEnabled	Specifies if other cells should be used for snapping the right, center or left side of the current selection.
guide	Holds the mxGuide instance that is used for alignment.
currentDx	Stores the x-coordinate of the current mouse move.
currentDy	Stores the y-coordinate of the current mouse move.
updateCursor	Specifies if a move cursor should be shown if the mouse is over a movable cell.
selectEnabled	Specifies if selecting is enabled.
removeCellsFromParent	Specifies if cells may be moved out of their parents.
removeEmptyParents	If empty parents should be removed from the model after all child cells have been moved out.
connectOnDrop	Specifies if drop events are interpreted as new connections if no other drop action is defined.
scrollOnMove	Specifies if the view should be scrolled so that a moved cell is visible.
minimumSize	Specifies the minimum number of pixels for the width and height of a selection border.
previewColor	Specifies the color of the preview shape.
htmlPreview	Specifies if the graph container should be used for preview.
shape	Reference to the mxShape that represents the preview.
scaleGrid	Specifies if the grid should be scaled.
rotationEnabled	Specifies if the bounding box should allow for rotation.
Functions
isEnabled	Returns enabled.
setEnabled	Sets enabled.
isCloneEnabled	Returns cloneEnabled.
setCloneEnabled	Sets cloneEnabled.
isMoveEnabled	Returns moveEnabled.
setMoveEnabled	Sets moveEnabled.
isSelectEnabled	Returns selectEnabled.
setSelectEnabled	Sets selectEnabled.
isRemoveCellsFromParent	Returns removeCellsFromParent.
setRemoveCellsFromParent	Sets removeCellsFromParent.
getInitialCellForEvent	Hook to return initial cell for the given event.
isDelayedSelection	Hook to return true for delayed selections.
consumeMouseEvent	Consumes the given mouse event.
mouseDown	Handles the event by selecing the given cell and creating a handle for it.
getGuideStates	Creates an array of cell states which should be used as guides.
getCells	Returns the cells to be modified by this handler.
getPreviewBounds	Returns the mxRectangle used as the preview bounds for moving the given cells.
getBoundingBox	Returns the union of the mxCellStates for the given array of mxCells.
createPreviewShape	Creates the shape used to draw the preview for the given bounds.
start	Starts the handling of the mouse gesture.
useGuidesForEvent	Returns true if the guides should be used for the given mxMouseEvent.
snap	Snaps the given vector to the grid and returns the given mxPoint instance.
getDelta	Returns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundLength	Hook for rounding the unscaled vector.
mouseMove	Handles the event by highlighting possible drop targets and updating the preview.
updatePreviewShape	Updates the bounds of the preview shape.
setHighlightColor	Sets the color of the rectangle used to highlight drop targets.
mouseUp	Handles the event by applying the changes to the selection cells.
selectDelayed	Implements the delayed selection for the given mouse event.
reset	Resets the state of this handler.
shouldRemoveCellsFromParent	Returns true if the given cells should be removed from the parent for the specified mousereleased event.
moveCells	Moves the given cells by the specified amount.
moveCells	Moves the given cells by the specified amount.
destroyShapes	Destroy the preview and highlight shapes.
destroy	Destroys the handler and all its resources and DOM nodes.
mxPanningHandler	Event handler that pans and creates popupmenus.
Functions
mxPanningHandler	Constructs an event handler that creates a mxPopupMenu and pans the graph.
Events
mxEvent.PAN_START	Fires when the panning handler changes its <active> state to true.
mxEvent.PAN	Fires while handle is processing events.
mxEvent.PAN_END	Fires when the panning handler changes its <active> state to false.
Variables
graph	Reference to the enclosing mxGraph.
useLeftButtonForPanning	Specifies if panning should be active for the left mouse button.
usePopupTrigger	Specifies if mxEvent.isPopupTrigger should also be used for panning.
ignoreCell	Specifies if panning should be active even if there is a cell under the mousepointer.
previewEnabled	Specifies if the panning should be previewed.
useGrid	Specifies if the panning steps should be aligned to the grid size.
panningEnabled	Specifies if panning should be enabled.
pinchEnabled	Specifies if pinch gestures should be handled as zoom.
maxScale	Specifies the maximum scale.
minScale	Specifies the minimum scale.
dx	Holds the current horizontal offset.
dy	Holds the current vertical offset.
startX	Holds the x-coordinate of the start point.
startY	Holds the y-coordinate of the start point.
Functions
isActive	Returns true if the handler is currently active.
isPanningEnabled	Returns panningEnabled.
setPanningEnabled	Sets panningEnabled.
isPinchEnabled	Returns pinchEnabled.
setPinchEnabled	Sets pinchEnabled.
isPanningTrigger	Returns true if the given event is a panning trigger for the optional given cell.
isForcePanningEvent	Returns true if the given mxMouseEvent should start panning.
mouseDown	Handles the event by initiating the panning.
start	Starts panning at the given event.
consumePanningTrigger	Consumes the given mxMouseEvent if it was a panning trigger in mouseDown.
mouseMove	Handles the event by updating the panning on the graph.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
panGraph	Pans graph by the given amount.
destroy	Destroys the handler and all its resources and DOM nodes.
mxPopupMenuHandler	Event handler that creates popupmenus.
Functions
mxPopupMenuHandler	Constructs an event handler that creates a mxPopupMenu.
Variables
graph	Reference to the enclosing mxGraph.
selectOnPopup	Specifies if cells should be selected if a popupmenu is displayed for them.
clearSelectionOnBackground	Specifies if cells should be deselected if a popupmenu is displayed for the diagram background.
triggerX	X-coordinate of the mouse down event.
triggerY	Y-coordinate of the mouse down event.
screenX	Screen X-coordinate of the mouse down event.
screenY	Screen Y-coordinate of the mouse down event.
Functions
init	Initializes the shapes required for this vertex handler.
isSelectOnPopup	Hook for returning if a cell should be selected for a given mxMouseEvent.
mouseDown	Handles the event by initiating the panning.
mouseMove	Handles the event by updating the panning on the graph.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
getCellForPopupEvent	Hook to return the cell for the mouse up popup trigger handling.
destroy	Destroys the handler and all its resources and DOM nodes.
mxCellMarker	A helper class to process mouse locations and highlight cells.
Events
mxEvent.MARK	Fires after a cell has been marked or unmarked.
Functions
mxCellMarker	Constructs a new cell marker.
Variables
graph	Reference to the enclosing mxGraph.
enabled	Specifies if the marker is enabled.
hotspot	Specifies the portion of the width and height that should trigger a highlight.
hotspotEnabled	Specifies if the hotspot is enabled.
validColor	Holds the valid marker color.
invalidColor	Holds the invalid marker color.
currentColor	Holds the current marker color.
validState	Holds the marked mxCellState if it is valid.
markedState	Holds the marked mxCellState.
Functions
setEnabled	Enables or disables event handling.
isEnabled	Returns true if events are handled.
setHotspot	Sets the hotspot.
getHotspot	Returns the hotspot.
setHotspotEnabled	Specifies whether the hotspot should be used in intersects.
isHotspotEnabled	Returns true if hotspot is used in intersects.
hasValidState	Returns true if validState is not null.
getValidState	Returns the validState.
getMarkedState	Returns the markedState.
reset	Resets the state of the cell marker.
process	Processes the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.
setCurrentState	Sets and marks the current valid state.
markCell	Marks the given cell using the given color, or validColor if no color is specified.
mark	Marks the markedState and fires a mark event.
unmark	Hides the marker and fires a mark event.
isValidState	Returns true if the given mxCellState is a valid state.
getMarkerColor	Returns the valid- or invalidColor depending on the value of isValid.
getState	Uses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.
getCell	Returns the mxCell for the given event and cell.
getStateToMark	Returns the mxCellState to be marked for the given mxCellState under the mouse.
intersects	Returns true if the given coordinate pair intersects the given state.
destroy	Destroys the handler and all its resources and DOM nodes.
mxSelectionCellsHandler	An event handler that manages cell handlers and invokes their mouse event processing functions.
Events
mxEvent.ADD	Fires if a cell has been added to the selection.
mxEvent.REMOVE	Fires if a cell has been remove from the selection.
graph	Reference to the enclosing mxGraph.
enabled	Specifies if events are handled.
refreshHandler	Keeps a reference to an event listener for later removal.
maxHandlers	Defines the maximum number of handlers to paint individually.
handlers	mxDictionary that maps from cells to handlers.
isEnabled	Returns enabled.
setEnabled	Sets enabled.
getHandler	Returns the handler for the given cell.
reset	Resets all handlers.
refresh	Reloads or updates all handlers.
isHandlerActive	Returns true if the given handler is active and should not be redrawn.
updateHandler	Updates the handler for the given shape if one exists.
mouseDown	Redirects the given event to the handlers.
mouseMove	Redirects the given event to the handlers.
mouseUp	Redirects the given event to the handlers.
destroy	Destroys the handler and all its resources and DOM nodes.
mxConnectionHandler	Graph event handler that creates new connections.
Events
mxEvent.START	Fires when a new connection is being created by the user.
mxEvent.CONNECT	Fires between begin- and endUpdate in connect.
mxEvent.RESET	Fires when the reset method is invoked.
mxConnectionHandler	Constructs an event handler that connects vertices using the specified factory method to create the new edges.
graph	Reference to the enclosing mxGraph.
factoryMethod	Function that is used for creating new edges.
moveIconFront	Specifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBack	Specifies if icons should be moved to the back of the overlay pane.
connectImage	mxImage that is used to trigger the creation of a new connection.
targetConnectImage	Specifies if the connect icon should be centered on the target state while connections are being previewed.
enabled	Specifies if events are handled.
select	Specifies if new edges should be selected.
createTarget	Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
marker	Holds the <mxTerminalMarker> used for finding source and target cells.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while connections are being created.
waypointsEnabled	Specifies if single clicks should add waypoints on the new edge.
ignoreMouseDown	Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
first	Holds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffset	Holds the offset for connect icons during connection preview.
edgeState	Optional mxCellState that represents the preview edge while the handler is active.
changeHandler	Holds the change event listener for later removal.
drillHandler	Holds the drill event listener for later removal.
mouseDownCounter	Counts the number of mouseDown events since the start.
movePreviewAway	Switch to enable moving the preview away from the mousepointer.
outlineConnect	Specifies if connections to the outline of a highlighted target should be enabled.
livePreview	Specifies if the actual shape of the edge state should be used for the preview.
cursor	Specifies the cursor to be used while the handler is active.
insertBeforeSource	Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isInsertBefore	Returns insertBeforeSource for non-loops and false for loops.
isCreateTarget	Returns createTarget.
setCreateTarget	Sets createTarget.
createShape	Creates the preview shape for new connections.
init	Initializes the shapes required for this connection handler.
isConnectableCell	Returns true if the given cell is connectable.
createMarker	Creates and returns the mxCellMarker used in marker.
start	Starts a new connection for the given state and coordinates.
isConnecting	Returns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSource	Returns mxGraph.isValidSource for the given source terminal.
isValidTarget	Returns true.
validateConnection	Returns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImage	Hook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForState	Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIcons	Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIcons	Redraws the given array of mxImageShapes.
redrawIcons	Redraws the given array of mxImageShapes.
destroyIcons	Destroys the connect icons and resets the respective state.
isStartEvent	Returns true if the given mouse down event should start this handler.
mouseDown	Handles the event by initiating a new connection.
isImmediateConnectSource	Returns true if a tap on the given source state should immediately start connecting.
createEdgeState	Hook to return an mxCellState which may be used during the preview.
isOutlineConnectEvent	Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentState	Updates the current state for a given mouse move event by using the marker.
isCellEnabled	Returns true if the given cell does not allow new connections to be created.
convertWaypoint	Converts the given point from screen coordinates to model coordinates.
snapToPreview	Called to snap the given point to the current preview.
mouseMove	Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeState	Updates edgeState.
getTargetPerimeterPoint	Returns the perimeter point for the given target state.
getSourcePerimeterPoint	Hook to update the icon position(s) based on a mouseOver event.
updateIcons	Hook to update the icon position(s) based on a mouseOver event.
isStopEvent	Returns true if the given mouse up event should stop this handler.
addWaypoint	Adds the waypoint for the given event to <waypoints>.
checkConstraints	Returns true if the connection for the given constraints is valid.
mouseUp	Handles the event by inserting the new connection.
reset	Resets the state of this handler.
drawPreview	Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeWidth	Returns the width used to draw the preview edge.
connect	Connects the given source and target using a new edge.
selectCells	Selects the given edge after adding a new connection.
insertEdge	Creates, inserts and returns the new edge for the given parameters.
createTargetVertex	Hook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentTolerance	Returns the tolerance for aligning new targets to sources.
createEdge	Creates and returns a new edge using factoryMethod if one exists.
destroy	Destroys the handler and all its resources and DOM nodes.
mxConstraintHandler	Handles constraints on connection targets.
Functions
mxConstraintHandler	Constructs an new constraint handler.
Variables
pointImage	mxImage to be used as the image for fixed connection points.
graph	Reference to the enclosing mxGraph.
enabled	Specifies if events are handled.
highlightColor	Specifies the color for the highlight.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
reset	Resets the state of this handler.
getTolerance	Returns the tolerance to be used for intersecting connection points.
getImageForConstraint	Returns the tolerance to be used for intersecting connection points.
isEventIgnored	Returns true if the given mxMouseEvent should be ignored in update.
isStateIgnored	Returns true if the given state should be ignored.
destroyIcons	Destroys the <focusIcons> if they exist.
destroyFocusHighlight	Destroys the <focusHighlight> if one exists.
isKeepFocusEvent	Returns true if the current focused state should not be changed for the given event.
getCellForEvent	Returns the cell for the given event.
update	Updates the state of this handler based on the given mxMouseEvent.
redraw	Transfers the focus to the given state as a source or target terminal.
setFocus	Transfers the focus to the given state as a source or target terminal.
createHighlightShape	Create the shape used to paint the highlight.
intersects	Returns true if the given icon intersects the given rectangle.
destroy	Destroy this handler.
mxRubberband	Event handler that selects rectangular regions.
Functions
mxRubberband	Constructs an event handler that selects rectangular regions in the graph using rubberband selection.
Variables
defaultOpacity	Specifies the default opacity to be used for the rubberband div.
enabled	Specifies if events are handled.
div	Holds the DIV element which is currently visible.
sharedDiv	Holds the DIV element which is used to display the rubberband.
currentX	Holds the value of the x argument in the last call to update.
currentY	Holds the value of the y argument in the last call to update.
fadeOut	Optional fade out effect.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isForceRubberbandEvent	Returns true if the given mxMouseEvent should start rubberband selection.
mouseDown	Handles the event by initiating a rubberband selection.
start	Sets the start point for the rubberband selection.
mouseMove	Handles the event by updating therubberband selection.
createShape	Creates the rubberband selection shape.
isActive	Returns true if this handler is active.
mouseUp	Handles the event by selecting the region of the rubberband using mxGraph.selectRegion.
execute	Resets the state of this handler and selects the current region for the given event.
reset	Resets the state of the rubberband selection.
update	Sets currentX and currentY and calls repaint.
repaint	Computes the bounding box and updates the style of the div.
destroy	Destroys the handler and all its resources and DOM nodes.
mxHandle	Implements a single custom handle for vertices.
Functions
mxHandle	Constructs a new handle for the given state.
Variables
cursor	Specifies the cursor to be used for this handle.
image	Specifies the mxImage to be used to render the handle.
image	Specifies the mxImage to be used to render the handle.
Functions
getPosition	Hook for subclassers to return the current position of the handle.
setPosition	Hooks for subclassers to update the style in the <state>.
execute	Hook for subclassers to execute the handle.
copyStyle	Sets the cell style with the given name to the corresponding value in <state>.
processEvent	Processes the given mxMouseEvent and invokes setPosition.
positionChanged	Called after setPosition has been called in processEvent.
getRotation	Returns the rotation defined in the style of the cell.
getTotalRotation	Returns the rotation from the style and the rotation from the direction of the cell.
init	Creates and initializes the shapes required for this handle.
createShape	Creates and returns the shape for this handle.
initShape	Initializes <shape> and sets its cursor.
redraw	Renders the shape for this handle.
isHtmlRequired	Returns true if this handle should be rendered in HTML.
rotatePoint	Rotates the point by the given angle.
flipPoint	Flips the given point vertically and/or horizontally.
snapPoint	Snaps the given point to the grid if ignore is false.
setVisible	Shows or hides this handle.
reset	Resets the state of this handle by setting its visibility to true.
destroy	Destroys this handle.
mxVertexHandler	Event handler for resizing cells.
Functions
mxVertexHandler	Constructs an event handler that allows to resize vertices and groups.
Variables
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState being modified.
singleSizer	Specifies if only one sizer handle at the bottom, right corner should be used.
index	Holds the index of the current handle.
allowHandleBoundsCheck	Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
handleImage	Optional mxImage to be used as handles.
tolerance	Optional tolerance for hit-detection in getHandleForEvent.
rotationEnabled	Specifies if a rotation handle should be visible.
parentHighlightEnabled	Specifies if the parent should be highlighted if a child cell is selected.
rotationRaster	Specifies if rotation steps should be “rasterized” depening on the distance to the handle.
rotationCursor	Specifies the cursor for the rotation handle.
livePreview	Specifies if resize should change the cell in-place.
manageSizers	Specifies if sizers should be hidden and spaced if the vertex is small.
constrainGroupByChildren	Specifies if the size of groups should be constrained by the children.
rotationHandleVSpacing	Vertical spacing for rotation icon.
horizontalOffset	The horizontal offset for the handles.
verticalOffset	The horizontal offset for the handles.
Functions
init	Initializes the shapes required for this vertex handler.
isRotationHandleVisible	Returns true if the rotation handle should be showing.
isConstrainedEvent	Returns true if the aspect ratio if the cell should be maintained.
isCenteredEvent	Returns true if the center of the vertex should be maintained during the resize.
createCustomHandles	Returns an array of custom handles.
updateMinBounds	Initializes the shapes required for this vertex handler.
getSelectionBounds	Returns the mxRectangle that defines the bounds of the selection border.
createParentHighlightShape	Creates the shape used to draw the selection border.
createSelectionShape	Creates the shape used to draw the selection border.
getSelectionColor	Returns mxConstants.VERTEX_SELECTION_COLOR.
getSelectionStrokeWidth	Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
isSelectionDashed	Returns <mxConstants.VERTEX_SELECTION_DASHED>.
createSizer	Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
isSizerVisible	Returns true if the sizer for the given index is visible.
createSizerShape	Creates the shape used for the sizer handle for the specified bounds an index.
createBounds	Helper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.
getHandleForEvent	Returns the index of the handle for the given event.
isCustomHandleEvent	Returns true if the given event allows custom handles to be changed.
mouseDown	Handles the event if a handle has been clicked.
isLivePreviewBorder	Called if livePreview is enabled to check if a border should be painted.
start	Starts the handling of the mouse gesture.
hideHandles	Shortcut to hideSizers.
hideSizers	Hides all sizers except.
checkTolerance	Checks if the coordinates for the given event are within the mxGraph.tolerance.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundAngle	Hook for rounding the angle.
roundLength	Hook for rounding the unscaled width or height.
mouseMove	Handles the event by updating the preview.
rotateVertex	Rotates the vertex.
rotateVertex	Rotates the vertex.
rotateVertex	Rotates the vertex.
updateLivePreview	Repaints the live preview.
mouseUp	Handles the event by applying the changes to the geometry.
rotateCell	Rotates the given cell to the given rotation.
rotateClick	Hook for subclassers to implement a single click on the rotation handle.
rotateCell	Rotates the given cell and its children by the given angle in degrees.
reset	Resets the state of this handler.
resizeCell	Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
moveChildren	Moves the children of the given cell by the given vector.
union	Returns the union of the given bounds and location for the specified handle index.
redraw	Redraws the handles and the preview.
redrawHandles	Redraws the handles.
getRotationHandlePosition	Returns an mxPoint that defines the rotation handle position.
updateParentHighlight	Updates the highlight of the parent if parentHighlightEnabled is true.
drawPreview	Redraws the preview.
destroy	Destroys the handler and all its resources and DOM nodes.
mxEdgeHandler	Graph event handler that reconnects edges and modifies control points and the edge label location.
Functions
mxEdgeHandler	Constructs an edge handler for the specified mxCellState.
Variables
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState being modified.
marker	Holds the <mxTerminalMarker> which is used for highlighting terminals.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while a connection is being changed.
shape	Holds the mxShape that represents the preview edge.
bends	Holds the mxShapes that represent the points.
labelShape	Holds the mxShape that represents the label position.
cloneEnabled	Specifies if cloning by control-drag is enabled.
addEnabled	Specifies if adding bends by shift-click is enabled.
removeEnabled	Specifies if removing bends by shift-click is enabled.
dblClickRemoveEnabled	Specifies if removing bends by double click is enabled.
mergeRemoveEnabled	Specifies if removing bends by dropping them on other bends is enabled.
straightRemoveEnabled	Specifies if removing bends by creating straight segments should be enabled.
virtualBendsEnabled	Specifies if virtual bends should be added in the center of each segments.
virtualBendOpacity	Opacity to be used for virtual bends (see virtualBendsEnabled).
parentHighlightEnabled	Specifies if the parent should be highlighted if a child cell is selected.
preferHtml	Specifies if bends should be added to the graph container.
allowHandleBoundsCheck	Specifies if the bounds of handles should be used for hit-detection in IE Default is true.
snapToTerminals	Specifies if waypoints should snap to the routing centers of terminals.
handleImage	Optional mxImage to be used as handles.
tolerance	Optional tolerance for hit-detection in getHandleForEvent.
outlineConnect	Specifies if connections to the outline of a highlighted target should be enabled.
manageLabelHandle	Specifies if the label handle should be moved if it intersects with another handle.
Functions
init	Initializes the shapes required for this edge handler.
createCustomHandles	Returns an array of custom handles.
isVirtualBendsEnabled	Returns true if virtual bends should be added.
isAddPointEvent	Returns true if the given event is a trigger to add a new point.
isRemovePointEvent	Returns true if the given event is a trigger to remove a point.
getSelectionPoints	Returns the list of points that defines the selection stroke.
createSelectionShape	Creates the shape used to draw the selection border.
createSelectionShape	Creates the shape used to draw the selection border.
getSelectionColor	Returns mxConstants.EDGE_SELECTION_COLOR.
getSelectionStrokeWidth	Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.
isSelectionDashed	Returns <mxConstants.EDGE_SELECTION_DASHED>.
isConnectableCell	Returns true if the given cell is connectable.
getCellAt	Creates and returns the mxCellMarker used in marker.
createMarker	Creates and returns the mxCellMarker used in marker.
validateConnection	Returns the error message or an empty string if the connection for the given source, target pair is not valid.
createBends	Creates and returns the bends used for modifying the edge.
createVirtualBends	Creates and returns the bends used for modifying the edge.
isHandleEnabled	Creates the shape used to display the given bend.
isHandleVisible	Returns true if the handle at the given index is visible.
createHandleShape	Creates the shape used to display the given bend.
createLabelHandleShape	Creates the shape used to display the the label handle.
initBend	Helper method to initialize the given bend.
getHandleForEvent	Returns the index of the handle for the given event.
isAddVirtualBendEvent	Returns true if the given event allows virtual bends to be added.
isCustomHandleEvent	Returns true if the given event allows custom handles to be changed.
mouseDown	Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
start	Starts the handling of the mouse gesture.
clonePreviewState	Returns a clone of the current preview state for the given point and terminal.
getSnapToTerminalTolerance	Returns the tolerance for the guides.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundLength	Hook for rounding the unscaled width or height.
isSnapToTerminalsEvent	Returns true if snapToTerminals is true and if alt is not pressed.
getPointForEvent	Returns the point for the given event.
getPreviewTerminalState	Updates the given preview state taking into account the state of the constraint handler.
getPreviewPoints	Updates the given preview state taking into account the state of the constraint handler.
isOutlineConnectEvent	Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updatePreviewState	Updates the given preview state taking into account the state of the constraint handler.
mouseMove	Handles the event by updating the preview.
mouseUp	Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
reset	Resets the state of this handler.
setPreviewColor	Sets the color of the preview to the given value.
convertPoint	Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
moveLabel	Changes the coordinates for the label of the given edge.
connect	Changes the terminal or terminal point of the given edge in the graph model.
changeTerminalPoint	Changes the terminal point of the given edge.
changePoints	Changes the control points of the given edge in the graph model.
addPoint	Adds a control point for the given state and event.
addPointAt	Adds a control point at the given point.
removePoint	Removes the control point at the given index from the given state.
getHandleFillColor	Returns the fillcolor for the handle at the given index.
redraw	Redraws the preview, and the bends- and label control points.
redrawHandles	Redraws the handles.
hideHandles	Shortcut to <hideSizers>.
redrawInnerBends	Updates and redraws the inner bends.
checkLabelHandle	Checks if the label handle intersects the given bounds and moves it if it intersects.
drawPreview	Redraws the preview.
refresh	Refreshes the bends of this handler.
destroyBends	Destroys all elements in bends.
destroy	Destroys the handler and all its resources and DOM nodes.
mxElbowEdgeHandler	Graph event handler that reconnects edges and modifies control points and the edge label location.
Functions
mxEdgeHandler	Constructs an edge handler for the specified mxCellState.
Variables
doubleClickOrientationResource	Specifies the resource key for the tooltip to be displayed on the single control point for routed edges.
Functions
createBends	Overrides mxEdgeHandler.createBends to create custom bends.
createVirtualBend	Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
getCursorForBend	Returns the cursor to be used for the bend.
getTooltipForNode	Returns the tooltip for the given node.
convertPoint	Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
redrawInnerBends	Updates and redraws the inner bends.
getCurrentPoints	Returns the current absolute points.
getPreviewPoints	Updates the given preview state taking into account the state of the constraint handler.
updatePreviewState	Overridden to perform optimization of the edge style result.
getTooltipForNode	Returns no tooltips.
createBends	Adds custom bends for the center of each segment.
createBends	Adds custom bends for the center of each segment.
redraw	Overridden to invoke <refresh> before the redraw.
redrawInnerBends	Updates the position of the custom bends.
mxKeyHandler	Event handler that listens to keystroke events.
Functions
mxKeyHandler	Constructs an event handler that executes functions bound to specific keystrokes.
Variables
graph	Reference to the mxGraph associated with this handler.
target	Reference to the target DOM, that is, the DOM node where the key event listeners are installed.
normalKeys	Maps from keycodes to functions for non-pressed control keys.
shiftKeys	Maps from keycodes to functions for pressed shift keys.
controlKeys	Maps from keycodes to functions for pressed control keys.
controlShiftKeys	Maps from keycodes to functions for pressed control and shift keys.
enabled	Specifies if events are handled.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling by updating enabled.
bindKey	Binds the specified keycode to the given function.
bindShiftKey	Binds the specified keycode to the given function.
bindControlKey	Binds the specified keycode to the given function.
bindControlShiftKey	Binds the specified keycode to the given function.
isControlDown	Returns true if the control key is pressed.
getFunction	Returns the function associated with the given key event or null if no function is associated with the given event.
isGraphEvent	Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.
keyDown	Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
isEnabledForEvent	Returns true if the given event should be handled.
isEventIgnored	Returns true if the given keystroke should be ignored.
escape	Hook to process ESCAPE keystrokes.
destroy	Destroys the handler and all its references into the DOM.
mxTooltipHandler	Graph event handler that displays tooltips.
Functions
mxTooltipHandler	Constructs an event handler that displays tooltips with the specified delay (in milliseconds).
Variables
zIndex	Specifies the zIndex for the tooltip and its shadow.
graph	Reference to the enclosing mxGraph.
delay	Delay to show the tooltip in milliseconds.
ignoreTouchEvents	Specifies if touch and pen events should be ignored.
hideOnHover	Specifies if the tooltip should be hidden if the mouse is moved over the current cell.
destroyed	True if this handler was destroyed using destroy.
enabled	Specifies if events are handled.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isHideOnHover	Returns hideOnHover.
setHideOnHover	Sets hideOnHover.
init	Initializes the DOM nodes required for this tooltip handler.
getStateForEvent	Returns the mxCellState to be used for showing a tooltip for this event.
mouseDown	Handles the event by initiating a rubberband selection.
mouseMove	Handles the event by updating the rubberband selection.
mouseUp	Handles the event by resetting the tooltip timer or hiding the existing tooltip.
resetTimer	Resets the timer.
reset	Resets and/or restarts the timer to trigger the display of the tooltip.
hide	Hides the tooltip and resets the timer.
hideTooltip	Hides the tooltip.
show	Shows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).
destroy	Destroys the handler and all its resources and DOM nodes.
mxCellTracker	Event handler that highlights cells.
Functions
mxCellTracker	Constructs an event handler that highlights cells.
mouseDown	Ignores the event.
mouseMove	Handles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.
mouseUp	Handles the event by reseting the highlight.
destroy	Destroys the object and all its resources and DOM nodes.
mxCellHighlight	A helper class to highlight cells.
Functions
mxCellHighlight	Constructs a cell highlight.
Variables
keepOnTop	Specifies if the highlights should appear on top of everything else in the overlay pane.
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState.
spacing	Specifies the spacing between the highlight for vertices and the vertex.
resetHandler	Holds the handler that automatically invokes reset if the highlight should be hidden.
Functions
setHighlightColor	Sets the color of the rectangle used to highlight drop targets.
drawHighlight	Creates and returns the highlight shape for the given state.
createShape	Creates and returns the highlight shape for the given state.
repaint	Updates the highlight after a change of the model or view.
repaint	Updates the highlight after a change of the model or view.
hide	Resets the state of the cell marker.
mark	Marks the <markedState> and fires a mark event.
isHighlightAt	Returns true if this highlight is at the given position.
destroy	Destroys the handler and all its resources and DOM nodes.
mxDefaultKeyHandler	Binds keycodes to actionnames in an editor.
Functions
mxDefaultKeyHandler	Constructs a new default key handler for the mxEditor.graph in the given mxEditor.
Variables
editor	Reference to the enclosing mxEditor.
handler	Holds the mxKeyHandler for key event handling.
Functions
bindAction	Binds the specified keycode to the given action in editor.
destroy	Destroys the handler associated with this object.
mxDefaultPopupMenu	Creates popupmenus for mouse events.
Functions
mxDefaultPopupMenu	Constructs a new popupmenu-factory based on given configuration.
Variables
imageBasePath	Base path for all icon attributes in the config.
config	XML node used as the description of new menu items.
Functions
createMenu	This function is called from mxEditor to add items to the given menu based on config.
addItems	Recursively adds the given items and all of its children into the given menu.
addAction	Helper method to bind an action to a new menu item.
createConditions	Evaluates the default conditions for the given context.
mxDefaultToolbar	Toolbar for the editor.
Functions
mxDefaultToolbar	Constructs a new toolbar for the given container and editor.
Variables
editor	Reference to the enclosing mxEditor.
toolbar	Holds the internal mxToolbar.
resetHandler	Reference to the function used to reset the toolbar.
spacing	Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.
connectOnDrop	Specifies if elements should be connected if new cells are dropped onto connectable elements.
init	Constructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.
Functions
addItem	Adds a new item that executes the given action in editor.
addSeparator	Adds a vertical separator using the optional icon.
addCombo	Helper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.
addActionCombo	Helper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.
addActionOption	Binds the given action to a option with the specified label in the given combo.
addOption	Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
addMode	Creates an item for selecting the given mode in the editor’s graph.
addPrototype	Creates an item for inserting a clone of the specified prototype cell into the editor’s graph.
drop	Handles a drop from a toolbar item to the graph.
insert	Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.
connect	Handles a drop by connecting the given vertex to the given source cell.
installDropHandler	Makes the given img draggable using the given function for handling a drop event.
destroy	Destroys the toolbar associated with this object and removes all installed listeners.
mxEditor	Extends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg.
onInit	Called from within the constructor.
mxgraph=seen	Set when the editor is started.
mxEvent.OPEN	Fires after a file was opened in open.
mxEvent.SAVE	Fires after the current file was saved in save.
mxEvent.POST	Fires if a successful response was received in postDiagram.
mxEvent.ROOT	Fires when the current root has changed, or when the title of the current root has changed.
mxEvent.BEFORE_ADD_VERTEX	Fires before a vertex is added in addVertex.
mxEvent.ADD_VERTEX	Fires between begin- and endUpdate in addVertex.
mxEvent.AFTER_ADD_VERTEX	Fires after a vertex was inserted and selected in addVertex.
mxEvent.ESCAPE	Fires when the escape key is pressed.
mxEditor	Constructs a new editor.
Controls and Handlers
askZoomResource	Specifies the resource key for the zoom dialog.
lastSavedResource	Specifies the resource key for the last saved info.
currentFileResource	Specifies the resource key for the current file info.
propertiesResource	Specifies the resource key for the properties window title.
tasksResource	Specifies the resource key for the tasks window title.
helpResource	Specifies the resource key for the help window title.
outlineResource	Specifies the resource key for the outline window title.
outline	Reference to the mxWindow that contains the outline.
graph	Holds a mxGraph for displaying the diagram.
graphRenderHint	Holds the render hint used for creating the graph in setGraphContainer.
toolbar	Holds a mxDefaultToolbar for displaying the toolbar.
status	DOM container that holds the statusbar.
popupHandler	Holds a mxDefaultPopupMenu for displaying popupmenus.
undoManager	Holds an mxUndoManager for the command history.
keyHandler	Holds a mxDefaultKeyHandler for handling keyboard events.
Actions and Options
actions	Maps from actionnames to actions, which are functions taking the editor and the cell as arguments.
dblClickAction	Specifies the name of the action to be executed when a cell is double clicked.
swimlaneRequired	Specifies if new cells must be inserted into an existing swimlane.
disableContextMenu	Specifies if the context menu should be disabled in the graph container.
Templates
insertFunction	Specifies the function to be used for inserting new cells into the graph.
forcedInserting	Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.
templates	Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
defaultEdge	Prototype edge cell that is used for creating new edges.
defaultEdgeStyle	Specifies the edge style to be returned in getEdgeStyle.
defaultGroup	Prototype group cell that is used for creating new groups.
groupBorderSize	Default size for the border of new groups.
Backend Integration
filename	Contains the URL of the last opened file as a string.
lineFeed	Character to be used for encoding linefeeds in save.
postParameterName	Specifies if the name of the post parameter that contains the diagram data in a post request to the server.
escapePostData	Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
urlPost	Specifies the URL to be used for posting the diagram to a backend in save.
urlImage	Specifies the URL to be used for creating a bitmap of the graph in the image action.
Autolayout
horizontalFlow	Specifies the direction of the flow in the diagram.
layoutDiagram	Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
swimlaneSpacing	Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
maintainSwimlanes	Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
layoutSwimlanes	Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
Attribute Cycling
cycleAttributeValues	Specifies the attribute values to be cycled when inserting new swimlanes.
cycleAttributeIndex	Index of the last consumed attribute index.
cycleAttributeName	Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
Windows
tasks	Holds the mxWindow created in showTasks.
tasksWindowImage	Icon for the tasks window.
tasksTop	Specifies the top coordinate of the tasks window in pixels.
help	Holds the mxWindow created in showHelp.
helpWindowImage	Icon for the help window.
urlHelp	Specifies the URL to be used for the contents of the Online Help window.
helpWidth	Specifies the width of the help window in pixels.
helpHeight	Specifies the height of the help window in pixels.
propertiesWidth	Specifies the width of the properties window in pixels.
propertiesHeight	Specifies the height of the properties window in pixels.
movePropertiesDialog	Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
validating	Specifies if mxGraph.validateGraph should automatically be invoked after each change.
modified	True if the graph has been modified since it was last saved.
isModified	Returns modified.
setModified	Sets modified to the specified boolean value.
addActions	Adds the built-in actions to the editor instance.
configure	Configures the editor using the specified node.
resetFirstTime	Resets the cookie that is used to remember if the editor has already been used.
resetHistory	Resets the command history, modified state and counters.
addAction	Binds the specified actionname to the specified function.
execute	Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
addTemplate	Adds the specified template under the given name in templates.
getTemplate	Returns the template for the given name.
createGraph	Creates the graph for the editor.
createSwimlaneManager	Sets the graph’s container using mxGraph.init.
createLayoutManager	Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
setGraphContainer	Sets the graph’s container using mxGraph.init.
installDblClickHandler	Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
installUndoHandler	Adds the undoManager to the graph model and the view.
installDrillHandler	Installs listeners for dispatching the <root> event.
installChangeHandler	Installs the listeners required to automatically validate the graph.
installInsertHandler	Installs the handler for invoking insertFunction if one is defined.
createDiagramLayout	Creates the layout instance used to layout the swimlanes in the diagram.
createSwimlaneLayout	Creates the layout instance used to layout the children of each swimlane.
createToolbar	Creates the toolbar with no container.
setToolbarContainer	Initializes the toolbar for the given container.
setStatusContainer	Creates the status using the specified container.
setStatus	Display the specified message in the status bar.
setTitleContainer	Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
treeLayout	Executes a vertical or horizontal compact tree layout using the specified cell as an argument.
getTitle	Returns the string value for the current root of the diagram.
getRootTitle	Returns the string value of the root cell in mxGraph.model.
undo	Undo the last change in graph.
redo	Redo the last change in graph.
groupCells	Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
createGroup	Creates and returns a clone of defaultGroup to be used as a new group cell in <group>.
open	Opens the specified file synchronously and parses it using readGraphModel.
readGraphModel	Reads the specified XML node into the existing graph model and resets the command history and modified state.
save	Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
postDiagram	Hook for subclassers to override the posting of a diagram represented by the given node to the given URL.
writeGraphModel	Hook to create the string representation of the diagram.
getUrlPost	Returns the URL to post the diagram to.
getUrlImage	Returns the URL to create the image with.
swapStyles	Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
showProperties	Creates and shows the properties dialog for the given cell.
isPropertiesVisible	Returns true if the properties dialog is currently visible.
createProperties	Creates and returns the DOM node that represents the contents of the properties dialog for the given cell.
hideProperties	Hides the properties dialog.
showTasks	Shows the tasks window.
refreshTasks	Updates the contents of the tasks window using createTasks.
createTasks	Updates the contents of the given DOM node to display the tasks associated with the current editor state.
showHelp	Shows the help window.
showOutline	Shows the outline window.
setMode	Puts the graph into the specified mode.
createPopupMenu	Uses popupHandler to create the menu in the graph’s panning handler.
createEdge	Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
getEdgeStyle	Returns a string identifying the style of new edges.
consumeCycleAttribute	Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
cycleAttribute	Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
addVertex	Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
destroy	Removes the editor and all its associated resources.
mxCodecRegistry	Singleton class that acts as a global registry for codecs.
Variables
codecs	Maps from constructor names to codecs.
aliases	Maps from classnames to codecnames.
Functions
register	Registers a new codec and associates the name of the template constructor in the codec with the codec object.
addAlias	Adds an alias for mapping a classname to a codecname.
getCodec	Returns a codec that handles objects that are constructed using the given constructor.
mxCodec	XML codec for JavaScript object graphs.
Functions
mxCodec	Constructs an XML encoder/decoder for the specified owner document.
Variables
document	The owner document of the codec.
objects	Maps from IDs to objects.
elements	Lookup table for resolving IDs to elements.
encodeDefaults	Specifies if default values should be encoded.
Functions
putObject	Assoiates the given object with the given ID and returns the given object.
getObject	Returns the decoded object for the element with the specified ID in document.
lookup	Hook for subclassers to implement a custom lookup mechanism for cell IDs.
getElementById	Returns the element with the given ID from document.
updateElements	Returns the element with the given ID from document.
addElement	Adds the given element to elements if it has an ID.
getId	Returns the ID of the specified object.
reference	Hook for subclassers to implement a custom method for retrieving IDs from objects.
encode	Encodes the specified object and returns the resulting XML node.
decode	Decodes the given XML node.
encodeCell	Encoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.
isCellCodec	Returns true if the given codec is a cell codec.
decodeCell	Decodes cells that have been encoded using inversion, ie.
insertIntoGraph	Inserts the given cell into its parent and terminal cells.
setAttribute	Sets the attribute on the specified node to value.
mxObjectCodec	Generic codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.
Functions
mxObjectCodec	Constructs a new codec for the specified template object.
Variables
allowEval	Static global switch that specifies if expressions in arrays are allowed.
template	Holds the template object associated with this codec.
exclude	Array containing the variable names that should be ignored by the codec.
idrefs	Array containing the variable names that should be turned into or converted from references.
mapping	Maps from from fieldnames to XML attribute names.
reverse	Maps from from XML attribute names to fieldnames.
Functions
getName	Returns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.
cloneTemplate	Returns a new instance of the template for this codec.
getFieldName	Returns the fieldname for the given attributename.
getAttributeName	Returns the attributename for the given fieldname.
isExcluded	Returns true if the given attribute is to be ignored by the codec.
isReference	Returns true if the given fieldname is to be treated as a textual reference (ID).
encode	Encodes the specified object and returns a node representing then given object.
encodeObject	Encodes the value of each member in then given obj into the given node using encodeValue.
encodeValue	Converts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.
writeAttribute	Writes the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.
writePrimitiveAttribute	Writes the given value as an attribute of the given node.
writeComplexAttribute	Writes the given value as a child node of the given node.
convertAttributeToXml	Converts true to “1” and false to “0” is isBooleanAttribute returns true.
isBooleanAttribute	Returns true if the given object attribute is a boolean value.
convertAttributeFromXml	Converts booleans and numeric values to the respective types.
isNumericAttribute	Returns true if the given XML attribute is or should be a numeric value.
beforeEncode	Hook for subclassers to pre-process the object before encoding.
afterEncode	Hook for subclassers to post-process the node for the given object after encoding and return the post-processed node.
decode	Parses the given node into the object or returns a new object representing the given node.
decodeNode	Calls decodeAttributes and decodeChildren for the given node.
decodeAttributes	Decodes all attributes of the given node using decodeAttribute.
isIgnoredAttribute	Returns true if the given attribute should be ignored.
decodeAttribute	Reads the given attribute into the specified object.
decodeChildren	Decodes all children of the given node using decodeChild.
decodeChild	Reads the specified child into the given object.
getFieldTemplate	Returns the template instance for the given field.
addObjectValue	Sets the decoded child node as a value of the given object.
processInclude	Returns true if the given node is an include directive and executes the include by decoding the XML document.
beforeDecode	Hook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.
afterDecode	Hook for subclassers to post-process the object after decoding.
mxCellCodec	Codec for mxCells.
Functions
isCellCodec	Returns true since this is a cell codec.
isExcluded	Excludes user objects that are XML nodes.
afterEncode	Encodes an mxCell and wraps the XML up inside the XML of the user object (inversion).
beforeDecode	Decodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).
mxModelCodec	Codec for mxGraphModels.
Functions
encodeObject	Encodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.
decodeChild	Overrides decode child to handle special child nodes.
decodeRoot	Reads the cells into the graph model.
mxRootChangeCodec	Codec for mxRootChanges.
Functions
onEncode	Encodes the child recursively.
beforeDecode	Decodes the optional children as cells using the respective decoder.
afterDecode	Restores the state by assigning the previous value.
mxChildChangeCodec	Codec for mxChildChanges.
Functions
isReference	Returns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.
isExcluded	Excludes references to parent or previous if not in the model.
afterEncode	Encodes the child recusively and adds the result to the given node.
beforeDecode	Decodes the any child nodes as using the respective codec from the registry.
afterDecode	Restores object state in the child change.
mxTerminalChangeCodec	Codec for mxTerminalChanges.
Functions
afterDecode	Restores the state by assigning the previous value.
mxGenericChangeCodec	Codec for mxValueChanges, mxStyleChanges, mxGeometryChanges, mxCollapseChanges and mxVisibleChanges.
Functions
mxGenericChangeCodec	Factory function that creates a mxObjectCodec for the specified change and fieldname.
afterDecode	Restores the state by assigning the previous value.
mxGraphCodec	Codec for mxGraphs.
mxGraphViewCodec	Custom encoder for mxGraphViews.
Functions
encode	Encodes the given mxGraphView using encodeCell starting at the model’s root.
encodeCell	Recursively encodes the specifed cell.
mxStylesheetCodec	Codec for mxStylesheets.
Functions
encode	Encodes a stylesheet.
getStringValue	Returns the string for encoding the given value.
decode	Reads a sequence of the following child nodes and attributes:
Variables
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content.
mxDefaultKeyHandlerCodec	Custom codec for configuring mxDefaultKeyHandlers.
Functions
encode	Returns null.
decode	Reads a sequence of the following child nodes and attributes:
mxDefaultToolbarCodec	Custom codec for configuring mxDefaultToolbars.
Functions
encode	Returns null.
decode	Reads a sequence of the following child nodes and attributes:
Variables
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content.
mxDefaultPopupMenuCodec	Custom codec for configuring mxDefaultPopupMenus.
Functions
encode	Returns null.
decode	Uses the given node as the config for mxDefaultPopupMenu.
mxEditorCodec	Codec for mxEditors.
Functions
beforeDecode	Decodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:
decodeChild	Overrides decode child to handle special child nodes.
decodeTemplates	Decodes the cells from the given node as templates.
decodeTemplates	Decodes the cells from the given node as templates.

Variables

VERSION

Contains the current version of the mxGraph library. The strings that communicate versions of mxGraph use the following format.

versionMajor.versionMinor.buildNumber.revisionNumber

Current version is 4.0.4.

IS_IE

IS_IE: navigator.userAgent.indexOf( 'MSIE' ) >

True if the current browser is Internet Explorer 10 or below. Use mxClient.IS_IE11 to detect IE 11.

IS_IE6

IS_IE6: navigator.userAgent.indexOf( 'MSIE 6' ) >

True if the current browser is Internet Explorer 6.x.

IS_IE11

True if the current browser is Internet Explorer 11.x.

IS_EDGE

True if the current browser is Microsoft Edge.

IS_QUIRKS

IS_QUIRKS: navigator.userAgent.indexOf( 'MSIE' ) >

True if the current browser is Internet Explorer and it is in quirks mode.

IS_EM

IS_EM: 'spellcheck' in document.createElement(
'textarea'
) && document.documentMode

True if the browser is IE11 in enterprise mode (IE8 standards mode).

VML_PREFIX

Prefix for VML namespace in node names. Default is ‘v’.

OFFICE_PREFIX

Prefix for VML office namespace in node names. Default is ‘o’.

IS_NS

IS_NS: navigator.userAgent.indexOf( 'Mozilla/' ) >

True if the current browser is Netscape (including Firefox).

IS_OP

IS_OP: navigator.userAgent.indexOf( 'Opera/' ) >

True if the current browser is Opera.

IS_OT

IS_OT: navigator.userAgent.indexOf( 'Presto/' ) >

True if -o-transform is available as a CSS style, ie for Opera browsers based on a Presto engine with version 2.5 or later.

IS_SF

IS_SF: navigator.userAgent.indexOf( 'AppleWebKit/' ) >

True if the current browser is Safari.

IS_IOS

Returns true if the user agent is an iPad, iPhone or iPod.

IS_GC

IS_GC: navigator.userAgent.indexOf( 'Chrome/' ) >

True if the current browser is Google Chrome.

IS_CHROMEAPP

IS_CHROMEAPP: window.chrome !

True if the this is running inside a Chrome App.

IS_FF

IS_FF: navigator.userAgent.indexOf( 'Firefox/' ) >

True if the current browser is Firefox.

IS_MT

True if -moz-transform is available as a CSS style. This is the case for all Firefox-based browsers newer than or equal 3, such as Camino, Iceweasel, Seamonkey and Iceape.

IS_VML

IS_VML: navigator.appName.toUpperCase()

True if the browser supports VML.

IS_SVG

IS_SVG: navigator.appName.toUpperCase() !

True if the browser supports SVG.

NO_FO

NO_FO: !document.createElementNS || document.createElementNS(
'http://www.w3.org/2000/svg',
'foreignObject'
) !

True if foreignObject support is not available. This is the case for Opera, older SVG-based browsers and all versions of IE.

IS_WIN

True if the client is a Windows.

IS_MAC

True if the client is a Mac.

IS_CHROMEOS

True if the client is a Chrome OS.

IS_TOUCH

True if this device supports touchstart/-move/-end events (Apple iOS, Android, Chromebook and Chrome Browser on touch-enabled devices).

IS_POINTER

IS_POINTER: window.PointerEvent !

True if this device supports Microsoft pointer events (always false on Macs).

IS_LOCAL

True if the documents location does not start with http:// or https://.

defaultBundles

Contains the base names of the default bundles if mxLoadResources is false.

Functions

isBrowserSupported

isBrowserSupported: function()

Returns true if the current browser is supported, that is, if mxClient.IS_VML or mxClient.IS_SVG is true.

Example

if (!mxClient.isBrowserSupported())
{
  mxUtils.error('Browser is not supported!', 200, false);
}

link

link: function( rel,
href,
doc,
id )

Adds a link node to the head of the document. Use this to add a stylesheet to the page as follows:

mxClient.link('stylesheet', filename);

where filename is the (relative) URL of the stylesheet. The charset is hardcoded to ISO-8859-1 and the type is text/css.

Parameters

rel	String that represents the rel attribute of the link node.
href	String that represents the href attribute of the link node.
doc	Optional parent document of the link node.
id	unique id for the link element to check if it already exists

loadResources

loadResources: function( fn,
lan )

Helper method to load the default bundles if mxLoadResources is false.

Parameters

fn	Function to call after all resources have been loaded.
lan	Optional string to pass to mxResources.add.

include

include: function( src )

Dynamically adds a script node to the document header.

In production environments, the includes are resolved in the mxClient.js file to reduce the number of requests required for client startup. This function should only be used in development environments, but not in production systems.

Variables

mxLoadResources

Optional global config variable to toggle loading of the two resource files in mxGraph and mxEditor. Default is true. NOTE: This is a global variable, not a variable of mxClient. If this is false, you can use mxClient.loadResources with its callback to load the default bundles asynchronously.

<script type="text/javascript">
     var mxLoadResources = false;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxForceIncludes

Optional global config variable to force loading the JavaScript files in development mode. Default is undefined. NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxLoadResources = true;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxResourceExtension

Optional global config variable to specify the extension of resource files. Default is true. NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxResourceExtension = '.txt';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

mxLoadStylesheets

Optional global config variable to toggle loading of the CSS files when the library is initialized. Default is true. NOTE: This is a global variable, not a variable of mxClient.

<script type="text/javascript">
     var mxLoadStylesheets = false;
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

basePath

Basepath for all URLs in the core without trailing slash. Default is ‘.’. Set mxBasePath prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxBasePath = '/path/to/core/directory';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

When using a relative path, the path is relative to the URL of the page that contains the assignment. Trailing slashes are automatically removed.

imageBasePath

Basepath for all images URLs in the core without trailing slash. Default is mxClient.basePath + ‘/images’. Set mxImageBasePath prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxImageBasePath = '/path/to/image/directory';
</script>
<script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>

When using a relative path, the path is relative to the URL of the page that contains the assignment. Trailing slashes are automatically removed.

language

Defines the language of the client, eg. en for english, de for german etc. The special value ‘none’ will disable all built-in internationalization and resource loading. See mxResources.getSpecialBundle for handling identifiers with and without a dash.

Set mxLanguage prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxLanguage = 'en';
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

If internationalization is disabled, then the following variables should be overridden to reflect the current language of the system. These variables are cleared when i18n is disabled. mxEditor.askZoomResource, mxEditor.lastSavedResource, mxEditor.currentFileResource, mxEditor.propertiesResource, mxEditor.tasksResource, mxEditor.helpResource, mxEditor.outlineResource, mxElbowEdgeHandler.doubleClickOrientationResource, mxUtils.errorResource, mxUtils.closeResource, mxGraphSelectionModel.doneResource, mxGraphSelectionModel.updatingSelectionResource, mxGraphView.doneResource, mxGraphView.updatingDocumentResource, <mxCellRenderer.collapseExpandResource>, mxGraph.containsValidationErrorsResource and mxGraph.alreadyConnectedResource.

defaultLanguage

Defines the default language which is used in the common resource files. Any resources for this language will only load the common resource file, but not the language-specific resource file. Default is ‘en’.

Set mxDefaultLanguage prior to loading the mxClient library as follows to override this setting:

<script type="text/javascript">
     mxDefaultLanguage = 'de';
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

languages

Defines the optional array of all supported language extensions. The default language does not have to be part of this list. See mxResources.isLanguageSupported.

<script type="text/javascript">
     mxLanguages = ['de', 'it', 'fr'];
</script>
<script type="text/javascript" src="js/mxClient.js"></script>

This is used to avoid unnecessary requests to language files, ie. if a 404 will be returned.

mxLog

A singleton class that implements a simple console.

Summary

Variables
consoleName	Specifies the name of the console window.
TRACE	Specified if the output for enter and leave should be visible in the console.
DEBUG	Specifies if the output for debug should be visible in the console.
WARN	Specifies if the output for warn should be visible in the console.
buffer	Buffer for pre-initialized content.
Functions
init	Initializes the DOM node for the console.
info	Writes the current navigator information to the console.
addButton	Adds a button to the console using the given label and function.
isVisible	Returns true if the console is visible.
show	Shows the console.
setVisible	Shows or hides the console.
enter	Writes the specified string to the console if TRACE is true and returns the current time in milliseconds.
leave	Writes the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds.
debug	Adds all arguments to the console if DEBUG is enabled.
warn	Adds all arguments to the console if WARN is enabled.
write	Adds the specified strings to the console.
writeln	Adds the specified strings to the console, appending a linefeed at the end of each string.

Variables

consoleName

Specifies the name of the console window. Default is ‘Console’.

TRACE

Specified if the output for enter and leave should be visible in the console. Default is false.

DEBUG

Specifies if the output for debug should be visible in the console. Default is true.

WARN

Specifies if the output for warn should be visible in the console. Default is true.

buffer

Buffer for pre-initialized content.

Functions

init

init: function()

Initializes the DOM node for the console. This requires document.body to point to a non-null value. This is called from within setVisible if the log has not yet been initialized.

info

info: function()

Writes the current navigator information to the console.

addButton

addButton: function( lab,
funct )

Adds a button to the console using the given label and function.

isVisible

isVisible: function()

Returns true if the console is visible.

show

show: function()

Shows the console.

setVisible

setVisible: function( visible )

Shows or hides the console.

enter

enter: function( string )

Writes the specified string to the console if TRACE is true and returns the current time in milliseconds.

Example

mxLog.show();
var t0 = mxLog.enter('Hello');
// Do something
mxLog.leave('World!', t0);

leave

leave: function( string,
t0 )

Writes the specified string to the console if TRACE is true and computes the difference between the current time and t0 in milliseconds. See enter for an example.

debug

debug: function()

Adds all arguments to the console if DEBUG is enabled.

Example

mxLog.show();
mxLog.debug('Hello, World!');

warn

warn: function()

Adds all arguments to the console if WARN is enabled.

Example

mxLog.show();
mxLog.warn('Hello, World!');

write

write: function()

Adds the specified strings to the console.

writeln

writeln: function()

Adds the specified strings to the console, appending a linefeed at the end of each string.

mxObjectIdentity

Identity for JavaScript objects and functions. This is implemented using a simple incrementing counter which is stored in each object under FIELD_NAME.

The identity for an object does not change during its lifecycle.

Summary

Variables
FIELD_NAME	Name of the field to be used to store the object ID.
counter	Current counter.
Functions
get	Returns the ID for the given object or function or null if no object is specified.
clear	Deletes the ID from the given object or function.

Variables

FIELD_NAME

Name of the field to be used to store the object ID. Default is <code>mxObjectId</code>.

counter

Current counter.

Functions

get

get: function( obj )

Returns the ID for the given object or function or null if no object is specified.

clear

clear: function( obj )

Deletes the ID from the given object or function.

mxDictionary

A wrapper class for an associative array with object keys. Note: This implementation uses <mxObjectIdentitiy> to turn object keys into strings.

Summary

Functions
mxEventSource	Constructs a new dictionary which allows object to be used as keys.
map	Stores the (key, value) pairs in this dictionary.
clear	Clears the dictionary.
get	Returns the value for the given key.
put	Stores the value under the given key and returns the previous value for that key.
remove	Removes the value for the given key and returns the value that has been removed.
getKeys	Returns all keys as an array.
getValues	Returns all values as an array.
visit	Visits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.

Functions

mxEventSource

Constructs a new dictionary which allows object to be used as keys.

map

Stores the (key, value) pairs in this dictionary.

clear

mxDictionary.prototype.clear = function()

Clears the dictionary.

get

mxDictionary.prototype.get = function( key )

Returns the value for the given key.

put

mxDictionary.prototype.put = function( key,
value )

Stores the value under the given key and returns the previous value for that key.

remove

mxDictionary.prototype.remove = function( key )

Removes the value for the given key and returns the value that has been removed.

getKeys

mxDictionary.prototype.getKeys = function()

Returns all keys as an array.

getValues

mxDictionary.prototype.getValues = function()

Returns all values as an array.

visit

mxDictionary.prototype.visit = function( visitor )

Visits all entries in the dictionary using the given function with the following signature: function(key, value) where key is a string and value is an object.

Parameters

visitor

A function that takes the key and value as arguments.

mxResources

Implements internationalization. You can provide any number of resource files on the server using the following format for the filename: name[-en].properties. The en stands for any lowercase 2-character language shortcut (eg. de for german, fr for french).

If the optional language extension is omitted, then the file is used as a default resource which is loaded in all cases. If a properties file for a specific language exists, then it is used to override the settings in the default resource. All entries in the file are of the form key=value. The values may then be accessed in code via get. Lines without equal signs in the properties files are ignored.

Resource files may either be added programmatically using add or via a resource tag in the UI section of the editor configuration file, eg:

<mxEditor>
  <ui>
    <resource basename="examples/resources/mxWorkflow"/>

The above element will load examples/resources/mxWorkflow.properties as well as the language specific file for the current language, if it exists.

Values may contain placeholders of the form {1}...{n} where each placeholder is replaced with the value of the corresponding array element in the params argument passed to mxResources.get. The placeholder {1} maps to the first element in the array (at index 0).

See mxClient.language for more information on specifying the default language or disabling all loading of resources.

Lines that start with a # sign will be ignored.

Special characters

To use unicode characters, use the standard notation (eg. \u8fd1) or %u as a prefix (eg. %u20AC will display a Euro sign). For normal hex encoded strings, use % as a prefix, eg. %F6 will display a “o umlaut” (ö).

See resourcesEncoded to disable this. If you disable this, make sure that your files are UTF-8 encoded.

Asynchronous loading

By default, the core adds two resource files synchronously at load time. To load these files asynchronously, set <mxLoadResources> to false before loading mxClient.js and use mxResources.loadResources instead.

Summary

Variables
resources	Object that maps from keys to values.
extension	Specifies the extension used for language files.
resourcesEncoded	Specifies whether or not values in resource files are encoded with \u or percentage.
loadDefaultBundle	Specifies if the default file for a given basename should be loaded.
loadDefaultBundle	Specifies if the specific language file file for a given basename should be loaded.
Functions
isLanguageSupported	Hook for subclassers to disable support for a given language.
getDefaultBundle	Hook for subclassers to return the URL for the special bundle.
getSpecialBundle	Hook for subclassers to return the URL for the special bundle.
add	Adds the default and current language properties file for the specified basename.
parse	Parses the key, value pairs in the specified text and stores them as local resources.
get	Returns the value for the specified resource key.
replacePlaceholders	Replaces the given placeholders with the given parameters.
loadResources	Loads all required resources asynchronously.

Variables

resources

Object that maps from keys to values.

extension

Specifies the extension used for language files. Default is <mxResourceExtension>.

resourcesEncoded

Specifies whether or not values in resource files are encoded with \u or percentage. Default is false.

loadDefaultBundle

Specifies if the default file for a given basename should be loaded. Default is true.

loadDefaultBundle

Specifies if the specific language file file for a given basename should be loaded. Default is true.

Functions

isLanguageSupported

isLanguageSupported: function( lan )

Hook for subclassers to disable support for a given language. This implementation returns true if lan is in mxClient.languages.

Parameters

lan	The current language.

getDefaultBundle

getDefaultBundle: function( basename,
lan )

Hook for subclassers to return the URL for the special bundle. This implementation returns basename + extension or null if loadDefaultBundle is false.

Parameters

basename	The basename for which the file should be loaded.
lan	The current language.

getSpecialBundle

getSpecialBundle: function( basename,
lan )

Hook for subclassers to return the URL for the special bundle. This implementation returns basename + ‘_’ + lan + extension or null if <loadSpecialBundle> is false or lan equals mxClient.defaultLanguage.

If <mxResources.languages> is not null and mxClient.language contains a dash, then this method checks if isLanguageSupported returns true for the full language (including the dash). If that returns false the first part of the language (up to the dash) will be tried as an extension.

If <mxResources.language> is null then the first part of the language is used to maintain backwards compatibility.

Parameters

basename	The basename for which the file should be loaded.
lan	The language for which the file should be loaded.

add

add: function( basename,
lan,
callback )

Adds the default and current language properties file for the specified basename. Existing keys are overridden as new files are added. If no callback is used then the request is synchronous.

Example

At application startup, additional resources may be added using the following code:

mxResources.add('resources/editor');

Parameters

basename	The basename for which the file should be loaded.
lan	The language for which the file should be loaded.
callback	Optional callback for asynchronous loading.

parse

parse: function( text )

Parses the key, value pairs in the specified text and stores them as local resources.

get

get: function( key,
params,
defaultValue )

Returns the value for the specified resource key.

Example

To read the value for ‘welomeMessage’, use the following:

var result = mxResources.get('welcomeMessage') || '';

This would require an entry of the following form in one of the English language resource files:

welcomeMessage=Welcome to mxGraph!

The part behind the || is the string value to be used if the given resource is not available.

Parameters

key	String that represents the key of the resource to be returned.
params	Array of the values for the placeholders of the form {1}...{n} to be replaced with in the resulting string.
defaultValue	Optional string that specifies the default return value.

replacePlaceholders

replacePlaceholders: function( value,
params )

Replaces the given placeholders with the given parameters.

Parameters

value	String that contains the placeholders.
params	Array of the values for the placeholders of the form {1}...{n} to be replaced with in the resulting string.

loadResources

loadResources: function( callback )

Loads all required resources asynchronously. Use this to load the graph and editor resources if <mxLoadResources> is false.

Parameters

callback

Callback function for asynchronous loading.

mxPoint

Implements a 2-dimensional vector with double precision coordinates.

Summary

Functions
mxPoint	Constructs a new point for the optional x and y coordinates.
Variables
x	Holds the x-coordinate of the point.
y	Holds the y-coordinate of the point.
Functions
equals	Returns true if the given object equals this point.
clone	Returns a clone of this mxPoint.

Functions

mxPoint

function mxPoint( x,
y )

Constructs a new point for the optional x and y coordinates. If no coordinates are given, then the default values for x and y are used.

Variables

x

mxPoint.prototype.x

Holds the x-coordinate of the point. Default is 0.

y

mxPoint.prototype.y

Holds the y-coordinate of the point. Default is 0.

Functions

equals

mxPoint.prototype.equals = function( obj )

Returns true if the given object equals this point.

clone

mxPoint.prototype.clone = function()

Returns a clone of this mxPoint.

mxRectangle

Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.

Summary

Functions
mxRectangle	Constructs a new rectangle for the optional parameters.
Variables
width	Holds the width of the rectangle.
height	Holds the height of the rectangle.
Functions
setRect	Sets this rectangle to the specified values
getCenterX	Returns the x-coordinate of the center point.
getCenterY	Returns the y-coordinate of the center point.
add	Adds the given rectangle to this rectangle.
intersect	Changes this rectangle to where it overlaps with the given rectangle.
grow	Grows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.
getPoint	Returns the top, left corner as a new mxPoint.
rotate90	Rotates this rectangle by 90 degree around its center point.
equals	Returns true if the given object equals this rectangle.
fromRectangle	Returns a new mxRectangle which is a copy of the given rectangle.

Functions

mxRectangle

function mxRectangle( x,
y,
width,
height )

Constructs a new rectangle for the optional parameters. If no parameters are given then the respective default values are used.

Variables

width

mxRectangle.prototype.width

Holds the width of the rectangle. Default is 0.

height

mxRectangle.prototype.height

Holds the height of the rectangle. Default is 0.

Functions

setRect

mxRectangle.prototype.setRect = function( x,
y,
w,
h )

Sets this rectangle to the specified values

getCenterX

mxRectangle.prototype.getCenterX = function ()

Returns the x-coordinate of the center point.

getCenterY

mxRectangle.prototype.getCenterY = function ()

Returns the y-coordinate of the center point.

add

mxRectangle.prototype.add = function( rect )

Adds the given rectangle to this rectangle.

intersect

mxRectangle.prototype.intersect = function( rect )

Changes this rectangle to where it overlaps with the given rectangle.

grow

mxRectangle.prototype.grow = function( amount )

Grows the rectangle by the given amount, that is, this method subtracts the given amount from the x- and y-coordinates and adds twice the amount to the width and height.

getPoint

mxRectangle.prototype.getPoint = function()

Returns the top, left corner as a new mxPoint.

rotate90

mxRectangle.prototype.rotate90 = function()

Rotates this rectangle by 90 degree around its center point.

equals

mxRectangle.prototype.equals = function( obj )

Returns true if the given object equals this rectangle.

fromRectangle

mxRectangle.fromRectangle = function( rect )

Returns a new mxRectangle which is a copy of the given rectangle.

mxEffects

Provides animation effects.

Summary

Functions
animateChanges	Asynchronous animated move operation.
cascadeOpacity	Sets the opacity on the given cell and its descendants.
fadeOut	Asynchronous fade-out operation.

Functions

animateChanges

animateChanges: function( graph,
changes,
done )

Asynchronous animated move operation. See also: mxMorphing.

Example

graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;

  if (changes.length < 10)
  {
    mxEffects.animateChanges(graph, changes);
  }
});

Parameters

graph	mxGraph that received the changes.
changes	Array of changes to be animated.
done	Optional function argument that is invoked after the last step of the animation.

cascadeOpacity

cascadeOpacity: function( graph,
cell,
opacity )

Sets the opacity on the given cell and its descendants.

Parameters

graph	mxGraph that contains the cells.
cell	mxCell to set the opacity for.
opacity	New value for the opacity in %.

fadeOut

fadeOut: function( node,
from,
remove,
step,
delay,
isEnabled )

Asynchronous fade-out operation.

mxUtils

A singleton class that provides cross-browser helper methods. This is a global functionality. To access the functions in this class, use the global classname appended by the functionname. You may have to load chrome://global/content/contentAreaUtils.js to disable certain security restrictions in Mozilla for the <open>, <save>, <saveAs> and <copy> function.

For example, the following code displays an error message

mxUtils.error('Browser is not supported!', 200, false);

Summary

Variables
errorResource	Specifies the resource key for the title of the error window.
closeResource	Specifies the resource key for the label of the close button.
errorImage	Defines the image used for error dialogs.
Functions
removeCursors	Removes the cursors from the style of the given DOM node and its descendants.
getCurrentStyle	Returns the current style of the specified element.
parseCssNumber	Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
setPrefixedStyle	Adds the given style with the standard name and an optional vendor prefix for the current browser.
hasScrollbars	Returns true if the overflow CSS property of the given node is either scroll or auto.
bind	Returns a wrapper function that locks the execution scope of the given function to the specified scope.
eval	Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.
findNode	Returns the first node where attr equals value.
getFunctionName	Returns the name for the given function.
indexOf	Returns the index of obj in array or -1 if the array does not contain the given object.
forEach	Calls the given function for each element of the given array and returns the array.
remove	Removes all occurrences of the given object in the given array or object.
isNode	Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isAncestorNode	Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.
getChildNodes	Returns an array of child nodes that are of the given node type.
importNode	Cross browser implementation for document.importNode.
createXmlDocument	Returns a new, empty XML document.
parseXml	Parses the specified XML string into a new XML document and returns the new document.
clearSelection	Clears the current selection in the page.
getPrettyXML	Returns a pretty printed string that represents the XML tree for the given node.
removeWhitespace	Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
htmlEntities	Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
isVml	Returns true if the given node is in the VML namespace.
getXml	Returns the XML content of the specified node.
extractTextWithWhitespace	Returns the text content of the specified node.
replaceTrailingNewlines	Replaces each trailing newline with the given pattern.
getTextContent	Returns the text content of the specified node.
setTextContent	Sets the text content of the specified node.
getInnerHtml	Returns the inner HTML for the given node as a string or an empty string if no node was specified.
getOuterHtml	Returns the outer HTML for the given node as a string or an empty string if no node was specified.
write	Creates a text node for the given string and appends it to the given parent.
writeln	Creates a text node for the given string and appends it to the given parent with an additional linefeed.
br	Appends a linebreak to the given parent and returns the linebreak.
button	Returns a new button with the given level and function as an onclick event handler.
para	Appends a new paragraph with the given text to the specified parent and returns the paragraph.
addTransparentBackgroundFilter	Adds a transparent background to the filter of the given node.
linkAction	Adds a hyperlink to the specified parent that invokes action on the specified editor.
linkInvoke	Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
link	Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.
getDocumentSize	Returns the client size for the current document as an mxRectangle.
fit	Makes sure the given node is inside the visible area of the window.
load	Loads the specified URL synchronously and returns the mxXmlRequest.
get	Loads the specified URL asynchronously and invokes the given functions depending on the request status.
getAll	Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
post	Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
submit	Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
loadInto	Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
getValue	Returns the value for the given key in the given associative array or the given default value if the value is null.
getNumber	Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.
getColor	Returns the color value for the given key in the given associative array or the given default value if the value is null.
clone	Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
equalPoints	Compares all mxPoints in the given lists.
equalEntries	Returns true if all properties of the given objects are equal.
removeDuplicates	Removes all duplicates from the given array.
isNaN	Returns true if the given value is of type number and isNaN returns true.
extend	Assigns a copy of the superclass prototype to the subclass prototype.
toString	Returns a textual representation of the specified object.
toRadians	Converts the given degree to radians.
toDegree	Converts the given radians to degree.
arcToCurves	Converts the given arc to a series of curves.
getBoundingBox	Returns the bounding box for the rotated rectangle.
getRotatedPoint	Rotates the given point by the given cos and sin.
reversePortConstraints	Reverse the port constraint bitmask.
findNearestSegment	Finds the index of the nearest segment on the given cell state for the specified coordinate pair.
getDirectedBounds	Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getPerimeterPoint	Returns the intersection between the polygon defined by the array of points and the line between center and point.
rectangleIntersectsSegment	Returns true if the given rectangle intersects the given segment.
contains	Returns true if the specified point (x, y) is contained in the given rectangle.
intersects	Returns true if the two rectangles intersect.
intersects	Returns true if the two rectangles intersect.
getOffset	Returns the offset for the specified container as an mxPoint.
getDocumentScrollOrigin	Returns the scroll origin of the given document or the current document if no document is given.
getScrollOrigin	Returns the top, left corner of the viewrect as an mxPoint.
convertPoint	Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
ltrim	Strips all whitespaces from the beginning of the string.
rtrim	Strips all whitespaces from the end of the string.
trim	Strips all whitespaces from both end of the string.
isNumeric	Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.
isInteger	Returns true if the given value is an valid integer number.
mod	Returns the remainder of division of n by m.
intersection	Returns the intersection of two lines as an mxPoint.
ptSegDistSq	Returns the square distance between a segment and a point.
ptLineDist	Returns the distance between a line defined by two points and a point.
relativeCcw	Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.
animateChanges	See mxEffects.animateChanges.
cascadeOpacity	See mxEffects.cascadeOpacity.
fadeOut	See mxEffects.fadeOut.
setOpacity	Sets the opacity of the specified DOM node to the given value in %.
createImage	Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
sortCells	Sorts the given cells according to the order in the cell hierarchy.
getStylename	Returns the stylename in a style of the form [(stylename\|key=value);] or an empty string if the given style does not contain a stylename.
getStylenames	Returns the stylenames in a style of the form [(stylename\|key=value);] or an empty array if the given style does not contain any stylenames.
indexOfStylename	Returns the index of the given stylename in the given style.
addStylename	Adds the specified stylename to the given style if it does not already contain the stylename.
removeStylename	Removes all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenames	Removes all stylenames from the given style and returns the updated style.
setCellStyles	Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.
setStyle	Adds or removes the given key, value pair to the style and returns the new style.
setCellStyleFlags	Sets or toggles the flag bit for the given key in the cell’s styles.
setStyleFlag	Sets or removes the given key from the specified style and returns the new style.
getAlignmentAsPoint	Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getSizeForString	Returns an mxRectangle with the size (width and height in pixels) of the given string.
getViewXml
getScaleForPageCount	Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
show	Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
printScreen	Prints the specified graph using a new window and the built-in print dialog.
popup	Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
alert	Displayss the given alert in a new dialog.
prompt	Displays the given message in a prompt dialog.
confirm	Displays the given message in a confirm dialog.
error	Displays the given error message in a new mxWindow of the given width.
makeDraggable	Configures the given DOM element to act as a drag source for the specified graph.

Variables

errorResource

Specifies the resource key for the title of the error window. If the resource for this key does not exist then the value is used as the title. Default is ‘error’.

closeResource

Specifies the resource key for the label of the close button. If the resource for this key does not exist then the value is used as the label. Default is ‘close’.

errorImage

Defines the image used for error dialogs.

Functions

removeCursors

removeCursors: function( element )

Removes the cursors from the style of the given DOM node and its descendants.

Parameters

element

DOM node to remove the cursor style from.

getCurrentStyle

getCurrentStyle: function()

Returns the current style of the specified element.

Parameters

element

DOM node whose current style should be returned.

parseCssNumber

parseCssNumber: function( value )

Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).

setPrefixedStyle

setPrefixedStyle: function()

Adds the given style with the standard name and an optional vendor prefix for the current browser.

mxUtils.setPrefixedStyle(node.style, 'transformOrigin', '0% 0%');

hasScrollbars

hasScrollbars: function( node )

Returns true if the overflow CSS property of the given node is either scroll or auto.

Parameters

node	DOM node whose style should be checked for scrollbars.

bind

bind: function( scope,
funct )

Returns a wrapper function that locks the execution scope of the given function to the specified scope. Inside funct, the “this” keyword becomes a reference to that scope.

eval

eval: function( expr )

Evaluates the given expression using eval and returns the JavaScript object that represents the expression result. Supports evaluation of expressions that define functions and returns the function object for these expressions.

Parameters

expr	A string that represents a JavaScript expression.

findNode

findNode: function( node,
attr,
value )

Returns the first node where attr equals value. This implementation does not use XPath.

getFunctionName

getFunctionName: function( f )

Returns the name for the given function.

Parameters

f	JavaScript object that represents a function.

indexOf

indexOf: function( array,
obj )

Returns the index of obj in array or -1 if the array does not contain the given object.

Parameters

array	Array to check for the given obj.
obj	Object to find in the given array.

forEach

forEach: function( array,
fn )

Calls the given function for each element of the given array and returns the array.

Parameters

array	Array that contains the elements.
fn	Function to be called for each object.

remove

remove: function( obj,
array )

Removes all occurrences of the given object in the given array or object. If there are multiple occurrences of the object, be they associative or as an array entry, all occurrences are removed from the array or deleted from the object. By removing the object from the array, all elements following the removed element are shifted by one step towards the beginning of the array.

The length of arrays is not modified inside this function.

Parameters

obj	Object to find in the given array.
array	Array to check for the given obj.

isNode

isNode: function( value,
nodeName,
attributeName,
attributeValue )

Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.

This implementation assumes that the given value is a DOM node if the nodeType property is numeric, that is, if isNaN returns false for value.nodeType.

Parameters

value	Object that should be examined as a node.
nodeName	String that specifies the node name.
attributeName	Optional attribute name to check.
attributeValue	Optional attribute value to check.

isAncestorNode

isAncestorNode: function( ancestor,
child )

Returns true if the given ancestor is an ancestor of the given DOM node in the DOM. This also returns true if the child is the ancestor.

Parameters

ancestor	DOM node that represents the ancestor.
child	DOM node that represents the child.

getChildNodes

getChildNodes: function( node,
nodeType )

Returns an array of child nodes that are of the given node type.

Parameters

node	Parent DOM node to return the children from.
nodeType	Optional node type to return. Default is mxConstants.NODETYPE_ELEMENT.

importNode

importNode: function( doc,
node,
allChildren )

Cross browser implementation for document.importNode. Uses document.importNode in all browsers but IE, where the node is cloned by creating a new node and copying all attributes and children into it using importNode, recursively.

Parameters

doc	Document to import the node into.
node	Node to be imported.
allChildren	If all children should be imported.

createXmlDocument

createXmlDocument: function()

Returns a new, empty XML document.

parseXml

parseXml: function()

Parses the specified XML string into a new XML document and returns the new document.

Example

var doc = mxUtils.parseXml(
  '<mxGraphModel><root><MyDiagram id="0"><mxCell/></MyDiagram>'+
  '<MyLayer id="1"><mxCell parent="0" /></MyLayer><MyObject id="2">'+
  '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+
  '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+
  '</mxCell></MyObject></root></mxGraphModel>');

Parameters

xml	String that contains the XML data.

clearSelection

clearSelection: function()

Clears the current selection in the page.

getPrettyXML

Returns a pretty printed string that represents the XML tree for the given node. This method should only be used to print XML for reading, use getXml instead to obtain a string for processing.

Parameters

node	DOM node to return the XML for.
tab	Optional string that specifies the indentation for one level. Default is two spaces.
indent	Optional string that represents the current indentation. Default is an empty string.

removeWhitespace

removeWhitespace: function( node,
before )

Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.

Parameters

node	DOM node whose siblings should be removed.
before	Optional boolean that specifies the direction of the traversal.

htmlEntities

htmlEntities: function( s,
newline )

Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.

Parameters

s	String that contains the characters to be converted.
newline	If newlines should be replaced. Default is true.

isVml

isVml: function( node )

Returns true if the given node is in the VML namespace.

Parameters

node	DOM node whose tag urn should be checked.

getXml

getXml: function( node,
linefeed )

Returns the XML content of the specified node. For Internet Explorer, all \r\n\t[\t]* are removed from the XML string and the remaining \r\n are replaced by \n. All \n are then replaced with linefeed, or 
 if no linefeed is defined.

Parameters

node	DOM node to return the XML for.
linefeed	Optional string that linefeeds are converted into. Default is

extractTextWithWhitespace

extractTextWithWhitespace: function( elems )

Returns the text content of the specified node.

Parameters

elems

DOM nodes to return the text for.

replaceTrailingNewlines

replaceTrailingNewlines: function( str,
pattern )

Replaces each trailing newline with the given pattern.

getTextContent

getTextContent: function( node )

Returns the text content of the specified node.

Parameters

node	DOM node to return the text content for.

setTextContent

setTextContent: function( node,
text )

Sets the text content of the specified node.

Parameters

node	DOM node to set the text content for.
text	String that represents the text content.

getInnerHtml

getInnerHtml: function()

Returns the inner HTML for the given node as a string or an empty string if no node was specified. The inner HTML is the text representing all children of the node, but not the node itself.

Parameters

node	DOM node to return the inner HTML for.

getOuterHtml

getOuterHtml: function()

Returns the outer HTML for the given node as a string or an empty string if no node was specified. The outer HTML is the text representing all children of the node including the node itself.

Parameters

node	DOM node to return the outer HTML for.

write

write: function( parent,
text )

Creates a text node for the given string and appends it to the given parent. Returns the text node.

Parameters

parent	DOM node to append the text node to.
text	String representing the text to be added.

writeln

writeln: function( parent,
text )

Creates a text node for the given string and appends it to the given parent with an additional linefeed. Returns the text node.

Parameters

parent	DOM node to append the text node to.
text	String representing the text to be added.

br

br: function( parent,
count )

Appends a linebreak to the given parent and returns the linebreak.

Parameters

parent

DOM node to append the linebreak to.

button

button: function( label,
funct,
doc )

Returns a new button with the given level and function as an onclick event handler.

document.body.appendChild(mxUtils.button('Test', function(evt)
{
  alert('Hello, World!');
}));

Parameters

label	String that represents the label of the button.
funct	Function to be called if the button is pressed.
doc	Optional document to be used for creating the button. Default is the current document.

para

para: function( parent,
text )

Appends a new paragraph with the given text to the specified parent and returns the paragraph.

Parameters

parent	DOM node to append the text node to.
text	String representing the text for the new paragraph.

addTransparentBackgroundFilter

addTransparentBackgroundFilter: function( node )

Adds a transparent background to the filter of the given node. This background can be used in IE8 standards mode (native IE8 only) to pass events through the node.

linkAction

linkAction: function( parent,
text,
editor,
action,
pad )

Adds a hyperlink to the specified parent that invokes action on the specified editor.

Parameters

parent	DOM node to contain the new link.
text	String that is used as the link label.
editor	mxEditor that will execute the action.
action	String that defines the name of the action to be executed.
pad	Optional left-padding for the link. Default is 0.

linkInvoke

linkInvoke: function( parent,
text,
editor,
functName,
arg,
pad )

Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument. The function name is the name of a function of the editor instance, not an action name.

Parameters

parent	DOM node to contain the new link.
text	String that is used as the link label.
editor	mxEditor instance to execute the function on.
functName	String that represents the name of the function.
arg	Object that represents the argument to the function.
pad	Optional left-padding for the link. Default is 0.

link

link: function( parent,
text,
funct,
pad )

Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.

Parameters

parent	DOM node to contain the new link.
text	String that is used as the link label.
funct	Function to execute when the link is clicked.
pad	Optional left-padding for the link. Default is 0.

getDocumentSize

getDocumentSize: function()

Returns the client size for the current document as an mxRectangle.

fit

fit: function( node )

Makes sure the given node is inside the visible area of the window. This is done by setting the left and top in the style.

load

load: function( url )

Loads the specified URL synchronously and returns the mxXmlRequest. Throws an exception if the file cannot be loaded. See mxUtils.get for an asynchronous implementation.

Example

try
{
  var req = mxUtils.load(filename);
  var root = req.getDocumentElement();
  // Process XML DOM...
}
catch (ex)
{
  mxUtils.alert('Cannot load '+filename+': '+ex);
}

Parameters

url	URL to get the data from.

get

get: function( url,
onload,
onerror,
binary,
timeout,
ontimeout )

Loads the specified URL asynchronously and invokes the given functions depending on the request status. Returns the mxXmlRequest in use. Both functions take the mxXmlRequest as the only parameter. See mxUtils.load for a synchronous implementation.

Example

mxUtils.get(url, function(req)
{
   var node = req.getDocumentElement();
   // Process XML DOM...
});

So for example, to load a diagram into an existing graph model, the following code is used.

mxUtils.get(url, function(req)
{
  var node = req.getDocumentElement();
  var dec = new mxCodec(node.ownerDocument);
  dec.decode(node, graph.getModel());
});

Parameters

url	URL to get the data from.
onload	Optional function to execute for a successful response.
onerror	Optional function to execute on error.
binary	Optional boolean parameter that specifies if the request is binary.
timeout	Optional timeout in ms before calling ontimeout.
ontimeout	Optional function to execute on timeout.

getAll

getAll: function( urls,
onload,
onerror )

Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status. The error handler is invoked once on the first error or invalid response.

Parameters

urls	Array of URLs to be loaded.
onload	Callback with array of mxXmlRequests.
onerror	Optional function to execute on error.

post

post: function( url,
params,
onload,
onerror )

Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status. Returns the mxXmlRequest in use. Both functions take the mxXmlRequest as the only parameter. Make sure to use encodeURIComponent for the parameter values.

Example

mxUtils.post(url, 'key=value', function(req)
{
 mxUtils.alert('Ready: '+req.isReady()+' Status: '+req.getStatus());
 // Process req.getDocumentElement() using DOM API if OK...
});

Parameters

url	URL to get the data from.
params	Parameters for the post request.
onload	Optional function to execute for a successful response.
onerror	Optional function to execute on error.

submit

submit: function( url,
params,
doc,
target )

Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest. Make sure to use encodeURIComponent for the parameter values.

Parameters

url	URL to get the data from.
params	Parameters for the form.
doc	Document to create the form in.
target	Target to send the form result to.

loadInto

loadInto: function( url,
doc,
onload )

Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded. This implementation does not use mxXmlRequest, but the document.load method.

Parameters

url	URL to get the data from.
doc	The document to load the URL into.
onload	Function to execute when the URL has been loaded.

getValue

getValue: function( array,
key,
defaultValue )

Returns the value for the given key in the given associative array or the given default value if the value is null.

Parameters

array	Associative array that contains the value for the key.
key	Key whose value should be returned.
defaultValue	Value to be returned if the value for the given key is null.

getNumber

getNumber: function( array,
key,
defaultValue )

Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null. The value is converted to a numeric value using the Number function.

Parameters

array	Associative array that contains the value for the key.
key	Key whose value should be returned.
defaultValue	Value to be returned if the value for the given key is null. Default is 0.

getColor

getColor: function( array,
key,
defaultValue )

Returns the color value for the given key in the given associative array or the given default value if the value is null. If the value is mxConstants.NONE then null is returned.

Parameters

array	Associative array that contains the value for the key.
key	Key whose value should be returned.
defaultValue	Value to be returned if the value for the given key is null. Default is null.

clone

clone: function( obj,
transients,
shallow )

Recursively clones the specified object ignoring all fieldnames in the given array of transient fields. mxObjectIdentity.FIELD_NAME is always ignored by this function.

Parameters

obj	Object to be cloned.
transients	Optional array of strings representing the fieldname to be ignored.
shallow	Optional boolean argument to specify if a shallow clone should be created, that is, one where all object references are not cloned or, in other words, one where only atomic (strings, numbers) values are cloned. Default is false.

equalPoints

equalPoints: function( a,
b )

Compares all mxPoints in the given lists.

Parameters

a	Array of mxPoints to be compared.
b	Array of mxPoints to be compared.

equalEntries

equalEntries: function( a,
b )

Returns true if all properties of the given objects are equal. Values with NaN are equal to NaN and unequal to any other value.

Parameters

a	First object to be compared.
b	Second object to be compared.

removeDuplicates

removeDuplicates: function( arr )

Removes all duplicates from the given array.

isNaN

isNaN: function( value )

Returns true if the given value is of type number and isNaN returns true.

extend

extend: function( ctor,
superCtor )

Assigns a copy of the superclass prototype to the subclass prototype. Note that this does not call the constructor of the superclass at this point, the superclass constructor should be called explicitely in the subclass constructor. Below is an example.

MyGraph = function(container, model, renderHint, stylesheet)
{
  mxGraph.call(this, container, model, renderHint, stylesheet);
}

mxUtils.extend(MyGraph, mxGraph);

Parameters

ctor	Constructor of the subclass.
superCtor	Constructor of the superclass.

toString

toString: function( obj )

Returns a textual representation of the specified object.

Parameters

obj	Object to return the string representation for.

toRadians

toRadians: function( deg )

Converts the given degree to radians.

toDegree

toDegree: function( rad )

Converts the given radians to degree.

arcToCurves

arcToCurves: function( x0,
y0,
r1,
r2,
angle,
largeArcFlag,
sweepFlag,
x,
y )

Converts the given arc to a series of curves.

getBoundingBox

getBoundingBox: function( rect,
rotation,
cx )

Returns the bounding box for the rotated rectangle.

Parameters

rect	mxRectangle to be rotated.
angle	Number that represents the angle (in degrees).
cx	Optional mxPoint that represents the rotation center. If no rotation center is given then the center of rect is used.

getRotatedPoint

getRotatedPoint: function( pt,
cos,
sin,
c )

Rotates the given point by the given cos and sin.

reversePortConstraints

reversePortConstraints: function( constraint )

Reverse the port constraint bitmask. For example, north | east becomes south | west

findNearestSegment

findNearestSegment: function( state,
x,
y )

Finds the index of the nearest segment on the given cell state for the specified coordinate pair.

getDirectedBounds

getDirectedBounds: function ( rect,
m,
style,
flipH,
flipV )

Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.

getPerimeterPoint

getPerimeterPoint: function ( pts,
center,
point )

Returns the intersection between the polygon defined by the array of points and the line between center and point.

rectangleIntersectsSegment

rectangleIntersectsSegment: function( bounds,
p1,
p2 )

Returns true if the given rectangle intersects the given segment.

Parameters

bounds	mxRectangle that represents the rectangle.
p1	mxPoint that represents the first point of the segment.
p2	mxPoint that represents the second point of the segment.

contains

contains: function( bounds,
x,
y )

Returns true if the specified point (x, y) is contained in the given rectangle.

Parameters

bounds	mxRectangle that represents the area.
x	X-coordinate of the point.
y	Y-coordinate of the point.

intersects

intersects: function( a,
b )

Returns true if the two rectangles intersect.

Parameters

a	mxRectangle to be checked for intersection.
b	mxRectangle to be checked for intersection.

intersects

intersectsHotspot: function( state,
x,
y,
hotspot,
min,
max )

Returns true if the two rectangles intersect.

Parameters

a	mxRectangle to be checked for intersection.
b	mxRectangle to be checked for intersection.

getOffset

getOffset: function( container,
scrollOffset )

Returns the offset for the specified container as an mxPoint. The offset is the distance from the top left corner of the container to the top left corner of the document.

Parameters

container	DOM node to return the offset for.
scollOffset	Optional boolean to add the scroll offset of the document. Default is false.

getDocumentScrollOrigin

getDocumentScrollOrigin: function( doc )

Returns the scroll origin of the given document or the current document if no document is given.

getScrollOrigin

getScrollOrigin: function( node,
includeAncestors,
includeDocument )

Returns the top, left corner of the viewrect as an mxPoint.

Parameters

node	DOM node whose scroll origin should be returned.
includeAncestors	Whether the scroll origin of the ancestors should be included. Default is false.
includeDocument	Whether the scroll origin of the document should be included. Default is true.

convertPoint

convertPoint: function( container,
x,
y )

Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.

var pt = mxUtils.convertPoint(graph.container,
  mxEvent.getClientX(evt), mxEvent.getClientY(evt));

Parameters

container	DOM node to use for the offset.
x	X-coordinate of the point to be converted.
y	Y-coordinate of the point to be converted.

ltrim

ltrim: function( str,
chars )

Strips all whitespaces from the beginning of the string. Without the second parameter, this will trim these characters:

” “ (ASCII 32 (0x20)), an ordinary space
”\t” (ASCII 9 (0x09)), a tab
”\n” (ASCII 10 (0x0A)), a new line (line feed)
”\r” (ASCII 13 (0x0D)), a carriage return
”\0” (ASCII 0 (0x00)), the NUL-byte
”\x0B” (ASCII 11 (0x0B)), a vertical tab

rtrim

rtrim: function( str,
chars )

Strips all whitespaces from the end of the string. Without the second parameter, this will trim these characters:

” “ (ASCII 32 (0x20)), an ordinary space
”\t” (ASCII 9 (0x09)), a tab
”\n” (ASCII 10 (0x0A)), a new line (line feed)
”\r” (ASCII 13 (0x0D)), a carriage return
”\0” (ASCII 0 (0x00)), the NUL-byte
”\x0B” (ASCII 11 (0x0B)), a vertical tab

trim

trim: function( str,
chars )

Strips all whitespaces from both end of the string. Without the second parameter, Javascript function will trim these characters:

” “ (ASCII 32 (0x20)), an ordinary space
”\t” (ASCII 9 (0x09)), a tab
”\n” (ASCII 10 (0x0A)), a new line (line feed)
”\r” (ASCII 13 (0x0D)), a carriage return
”\0” (ASCII 0 (0x00)), the NUL-byte
”\x0B” (ASCII 11 (0x0B)), a vertical tab

isNumeric

isNumeric: function( n )

Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.

Parameters

n	String representing the possibly numeric value.

isInteger

isInteger: function( n )

Returns true if the given value is an valid integer number.

Parameters

n	String representing the possibly numeric value.

mod

mod: function( n,
m )

Returns the remainder of division of n by m. You should use this instead of the built-in operation as the built-in operation does not properly handle negative numbers.

intersection

intersection: function ( x0,
y0,
x1,
y1,
x2,
y2,
x3,
y3 )

Returns the intersection of two lines as an mxPoint.

Parameters

x0	X-coordinate of the first line’s startpoint.
y0	X-coordinate of the first line’s startpoint.
x1	X-coordinate of the first line’s endpoint.
y1	Y-coordinate of the first line’s endpoint.
x2	X-coordinate of the second line’s startpoint.
y2	Y-coordinate of the second line’s startpoint.
x3	X-coordinate of the second line’s endpoint.
y3	Y-coordinate of the second line’s endpoint.

ptSegDistSq

ptSegDistSq: function( x1,
y1,
x2,
y2,
px,
py )

Returns the square distance between a segment and a point. To get the distance between a point and a line (with infinite length) use mxUtils.ptLineDist.

Parameters

x1	X-coordinate of the startpoint of the segment.
y1	Y-coordinate of the startpoint of the segment.
x2	X-coordinate of the endpoint of the segment.
y2	Y-coordinate of the endpoint of the segment.
px	X-coordinate of the point.
py	Y-coordinate of the point.

ptLineDist

ptLineDist: function( x1,
y1,
x2,
y2,
px,
py )

Returns the distance between a line defined by two points and a point. To get the distance between a point and a segment (with a specific length) use <mxUtils.ptSeqDistSq>.

Parameters

x1	X-coordinate of point 1 of the line.
y1	Y-coordinate of point 1 of the line.
x2	X-coordinate of point 1 of the line.
y2	Y-coordinate of point 1 of the line.
px	X-coordinate of the point.
py	Y-coordinate of the point.

relativeCcw

relativeCcw: function( x1,
y1,
x2,
y2,
px,
py )

Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.

Parameters

x1	X-coordinate of the startpoint of the segment.
y1	Y-coordinate of the startpoint of the segment.
x2	X-coordinate of the endpoint of the segment.
y2	Y-coordinate of the endpoint of the segment.
px	X-coordinate of the point.
py	Y-coordinate of the point.

animateChanges

animateChanges: function( graph,
changes )

See mxEffects.animateChanges. This is for backwards compatibility and will be removed later.

cascadeOpacity

cascadeOpacity: function( graph,
cell,
opacity )

See mxEffects.cascadeOpacity. This is for backwards compatibility and will be removed later.

fadeOut

fadeOut: function( node,
from,
remove,
step,
delay,
isEnabled )

See mxEffects.fadeOut. This is for backwards compatibility and will be removed later.

setOpacity

setOpacity: function( node,
value )

Sets the opacity of the specified DOM node to the given value in %.

Parameters

node	DOM node to set the opacity for.
value	Opacity in %. Possible values are between 0 and 100.

createImage

createImage: function( src )

Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.

Parameters

src	URL that points to the image to be displayed.

sortCells

sortCells: function( cells,
ascending )

Sorts the given cells according to the order in the cell hierarchy. Ascending is optional and defaults to true.

getStylename

getStylename: function( style )

Returns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.

Parameters

style

String of the form [(stylename|key=value);].

getStylenames

getStylenames: function( style )

Returns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.

Parameters

style

String of the form [(stylename|key=value);].

indexOfStylename

indexOfStylename: function( style,
stylename )

Returns the index of the given stylename in the given style. This returns -1 if the given stylename does not occur (as a stylename) in the given style, otherwise it returns the index of the first character.

addStylename

addStylename: function( style,
stylename )

Adds the specified stylename to the given style if it does not already contain the stylename.

removeStylename

removeStylename: function( style,
stylename )

Removes all occurrences of the specified stylename in the given style and returns the updated style. Trailing semicolons are not preserved.

removeAllStylenames

removeAllStylenames: function( style )

Removes all stylenames from the given style and returns the updated style.

setCellStyles

setCellStyles: function( model,
cells,
key,
value )

Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.

Parameters

model	mxGraphModel to execute the transaction in.
cells	Array of mxCells to be updated.
key	Key of the style to be changed.
value	New value for the given key.

setStyle

setStyle: function( style,
key,
value )

Adds or removes the given key, value pair to the style and returns the new style. If value is null or zero length then the key is removed from the style. This is for cell styles, not for CSS styles.

Parameters

style	String of the form [(stylename\|key=value);].
key	Key of the style to be changed.
value	New value for the given key.

setCellStyleFlags

setCellStyleFlags: function( model,
cells,
key,
flag,
value )

Sets or toggles the flag bit for the given key in the cell’s styles. If value is null then the flag is toggled.

Example

var cells = graph.getSelectionCells();
mxUtils.setCellStyleFlags(graph.model,
         cells,
         mxConstants.STYLE_FONTSTYLE,
         mxConstants.FONT_BOLD);

Toggles the bold font style.

Parameters

model	mxGraphModel that contains the cells.
cells	Array of mxCells to change the style for.
key	Key of the style to be changed.
flag	Integer for the bit to be changed.
value	Optional boolean value for the flag.

setStyleFlag

setStyleFlag: function( style,
key,
flag,
value )

Sets or removes the given key from the specified style and returns the new style. If value is null then the flag is toggled.

Parameters

style	String of the form [(stylename\|key=value);].
key	Key of the style to be changed.
flag	Integer for the bit to be changed.
value	Optional boolean value for the given flag.

getAlignmentAsPoint

getAlignmentAsPoint: function( align,
valign )

Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations. X is -0.5 for center, -1 for right and 0 for left alignment. Y is -0.5 for middle, -1 for bottom and 0 for top alignment. Default values for missing arguments is top, left.

getSizeForString

getSizeForString: function( text,
fontSize,
fontFamily,
textWidth )

Returns an mxRectangle with the size (width and height in pixels) of the given string. The string may contain HTML markup. Newlines should be converted to br before calling this method. The caller is responsible for sanitizing the HTML markup.

Example

var label = graph.getLabel(cell).replace(/\n/g, "<br>");
var size = graph.getSizeForString(label);

Parameters

text	String whose size should be returned.
fontSize	Integer that specifies the font size in pixels. Default is mxConstants.DEFAULT_FONTSIZE.
fontFamily	String that specifies the name of the font family. Default is mxConstants.DEFAULT_FONTFAMILY.
textWidth	Optional width for text wrapping.

getViewXml

getViewXml: function( graph,
scale,
cells,
x0,
y0 )

getScaleForPageCount

getScaleForPageCount: function( pageCount,
graph,
pageFormat,
border )

Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format. The scale is always computed such that it given the given amount or fewer pages in the print output. See mxPrintPreview for an example.

Parameters

pageCount	Specifies the number of pages in the print output.
graph	mxGraph that should be printed.
pageFormat	Optional mxRectangle that specifies the page format. Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT.
border	The border along each side of every page.

show

show: function( graph,
doc,
x0,
y0,
w,
h )

Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles. The document is returned.

This function should be called from within the document with the graph. If you experience problems with missing stylesheets in IE then try adding the domain to the trusted sites.

Parameters

graph	mxGraph to be copied.
doc	Document where the new graph is created.
x0	X-coordinate of the graph view origin. Default is 0.
y0	Y-coordinate of the graph view origin. Default is 0.
w	Optional width of the graph view.
h	Optional height of the graph view.

printScreen

printScreen: function( graph )

Prints the specified graph using a new window and the built-in print dialog.

This function should be called from within the document with the graph.

Parameters

graph

mxGraph to be printed.

popup

popup: function( content,
isInternalWindow )

Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.

Parameters

content	String that specifies the text to be displayed.
isInternalWindow	Optional boolean indicating if an mxWindow should be used instead of a new browser window. Default is false.

alert

alert: function( message )

Displayss the given alert in a new dialog. This implementation uses the built-in alert function. This is used to display validation errors when connections cannot be changed or created.

Parameters

message

String specifying the message to be displayed.

prompt

prompt: function( message,
defaultValue )

Displays the given message in a prompt dialog. This implementation uses the built-in prompt function.

Parameters

message	String specifying the message to be displayed.
defaultValue	Optional string specifying the default value.

confirm

confirm: function( message )

Displays the given message in a confirm dialog. This implementation uses the built-in confirm function.

Parameters

message

String specifying the message to be displayed.

error

error: function( message,
width,
close,
icon )

Displays the given error message in a new mxWindow of the given width. If close is true then an additional close button is added to the window. The optional icon specifies the icon to be used for the window. Default is mxUtils.errorImage.

Parameters

message	String specifying the message to be displayed.
width	Integer specifying the width of the window.
close	Optional boolean indicating whether to add a close button.
icon	Optional icon for the window decoration.

makeDraggable

makeDraggable: function( element,
graphF,
funct,
dragElement,
dx,
dy,
autoscroll,
scalePreview,
highlightDropTargets,
getDropTarget )

Configures the given DOM element to act as a drag source for the specified graph. Returns a a new mxDragSource. If <mxDragSource.guideEnabled> is enabled then the x and y arguments must be used in funct to match the preview location.

Example

var funct = function(graph, evt, cell, x, y)
{
  if (graph.canImportCell(cell))
  {
    var parent = graph.getDefaultParent();
    var vertex = null;

    graph.getModel().beginUpdate();
    try
    {
      vertex = graph.insertVertex(parent, null, 'Hello', x, y, 80, 30);
    }
    finally
    {
      graph.getModel().endUpdate();
    }

    graph.setSelectionCell(vertex);
  }
}

var img = document.createElement('img');
img.setAttribute('src', 'editors/images/rectangle.gif');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
img.style.width = '16px';
img.style.height = '16px';

var dragImage = img.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
mxUtils.makeDraggable(img, graph, funct, dragImage);
document.body.appendChild(img);

Parameters

element	DOM element to make draggable.
graphF	mxGraph that acts as the drop target or a function that takes a mouse event and returns the current mxGraph.
funct	Function to execute on a successful drop.
dragElement	Optional DOM node to be used for the drag preview.
dx	Optional horizontal offset between the cursor and the drag preview.
dy	Optional vertical offset between the cursor and the drag preview.
autoscroll	Optional boolean that specifies if autoscroll should be used. Default is mxGraph.autoscroll.
scalePreview	Optional boolean that specifies if the preview element should be scaled according to the graph scale. If this is true, then the offsets will also be scaled. Default is false.
highlightDropTargets	Optional boolean that specifies if dropTargets should be highlighted. Default is true.
getDropTarget	Optional function to return the drop target for a given location (x, y). Default is mxGraph.getCellAt.

mxConstants

Defines various global constants.

Summary

Variables
DEFAULT_HOTSPOT	Defines the portion of the cell which is to be used as a connectable region.
MIN_HOTSPOT_SIZE	Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
MAX_HOTSPOT_SIZE	Defines the maximum size in pixels of the portion of the cell which is to be used as a connectable region.
RENDERING_HINT_EXACT	Defines the exact rendering hint.
RENDERING_HINT_FASTER	Defines the faster rendering hint.
RENDERING_HINT_FASTEST	Defines the fastest rendering hint.
DIALECT_SVG	Defines the SVG display dialect name.
DIALECT_VML	Defines the VML display dialect name.
DIALECT_MIXEDHTML	Defines the mixed HTML display dialect name.
DIALECT_PREFERHTML	Defines the preferred HTML display dialect name.
DIALECT_STRICTHTML	Defines the strict HTML display dialect.
NS_SVG	Defines the SVG namespace.
NS_XHTML	Defines the XHTML namespace.
NS_XLINK	Defines the XLink namespace.
SHADOWCOLOR	Defines the color to be used to draw shadows in shapes and windows.
VML_SHADOWCOLOR	Used for shadow color in filters where transparency is not supported (Microsoft Internet Explorer).
SHADOW_OFFSET_X	Specifies the x-offset of the shadow.
SHADOW_OFFSET_Y	Specifies the y-offset of the shadow.
SHADOW_OPACITY	Defines the opacity for shadows.
NODETYPE_ELEMENT	DOM node of type ELEMENT.
NODETYPE_ATTRIBUTE	DOM node of type ATTRIBUTE.
NODETYPE_TEXT	DOM node of type TEXT.
NODETYPE_CDATA	DOM node of type CDATA.
NODETYPE_ENTITY_REFERENCE	DOM node of type ENTITY_REFERENCE.
NODETYPE_ENTITY	DOM node of type ENTITY.
NODETYPE_PROCESSING_INSTRUCTION	DOM node of type PROCESSING_INSTRUCTION.
NODETYPE_COMMENT	DOM node of type COMMENT.
NODETYPE_DOCUMENT	DOM node of type DOCUMENT.
NODETYPE_DOCUMENTTYPE	DOM node of type DOCUMENTTYPE.
NODETYPE_DOCUMENT_FRAGMENT	DOM node of type DOCUMENT_FRAGMENT.
NODETYPE_NOTATION	DOM node of type NOTATION.
TOOLTIP_VERTICAL_OFFSET	Defines the vertical offset for the tooltip.
DEFAULT_VALID_COLOR	Specifies the default valid color.
DEFAULT_INVALID_COLOR	Specifies the default invalid color.
OUTLINE_HIGHLIGHT_COLOR	Specifies the default highlight color for shape outlines.
OUTLINE_HIGHLIGHT_COLOR	Defines the strokewidth to be used for shape outlines.
HIGHLIGHT_STROKEWIDTH	Defines the strokewidth to be used for the highlights.
CONSTRAINT_HIGHLIGHT_SIZE	Size of the constraint highlight (in px).
HIGHLIGHT_OPACITY	Opacity (in %) used for the highlights (including outline).
CURSOR_MOVABLE_VERTEX	Defines the cursor for a movable vertex.
CURSOR_MOVABLE_EDGE	Defines the cursor for a movable edge.
CURSOR_LABEL_HANDLE	Defines the cursor for a movable label.
CURSOR_TERMINAL_HANDLE	Defines the cursor for a terminal handle.
CURSOR_BEND_HANDLE	Defines the cursor for a movable bend.
CURSOR_VIRTUAL_BEND_HANDLE	Defines the cursor for a movable bend.
CURSOR_CONNECT	Defines the cursor for a connectable state.
HIGHLIGHT_COLOR	Defines the color to be used for the cell highlighting.
TARGET_HIGHLIGHT_COLOR	Defines the color to be used for highlighting a target cell for a new or changed connection.
INVALID_CONNECT_TARGET_COLOR	Defines the color to be used for highlighting a invalid target cells for a new or changed connections.
DROP_TARGET_COLOR	Defines the color to be used for the highlighting target parent cells (for drag and drop).
VALID_COLOR	Defines the color to be used for the coloring valid connection previews.
INVALID_COLOR	Defines the color to be used for the coloring invalid connection previews.
EDGE_SELECTION_COLOR	Defines the color to be used for the selection border of edges.
VERTEX_SELECTION_COLOR	Defines the color to be used for the selection border of vertices.
VERTEX_SELECTION_STROKEWIDTH	Defines the strokewidth to be used for vertex selections.
EDGE_SELECTION_STROKEWIDTH	Defines the strokewidth to be used for edge selections.
SELECTION_DASHED	Defines the dashed state to be used for the vertex selection border.
SELECTION_DASHED	Defines the dashed state to be used for the edge selection border.
GUIDE_COLOR	Defines the color to be used for the guidelines in mxGraphHandler.
GUIDE_STROKEWIDTH	Defines the strokewidth to be used for the guidelines in mxGraphHandler.
OUTLINE_COLOR	Defines the color to be used for the outline rectangle border.
OUTLINE_STROKEWIDTH	Defines the strokewidth to be used for the outline rectangle stroke width.
HANDLE_SIZE	Defines the default size for handles.
LABEL_HANDLE_SIZE	Defines the default size for label handles.
HANDLE_FILLCOLOR	Defines the color to be used for the handle fill color.
HANDLE_STROKECOLOR	Defines the color to be used for the handle stroke color.
LABEL_HANDLE_FILLCOLOR	Defines the color to be used for the label handle fill color.
CONNECT_HANDLE_FILLCOLOR	Defines the color to be used for the connect handle fill color.
LOCKED_HANDLE_FILLCOLOR	Defines the color to be used for the locked handle fill color.
OUTLINE_HANDLE_FILLCOLOR	Defines the color to be used for the outline sizer fill color.
OUTLINE_HANDLE_STROKECOLOR	Defines the color to be used for the outline sizer stroke color.
DEFAULT_FONTFAMILY	Defines the default family for all fonts.
DEFAULT_FONTSIZE	Defines the default size (in px).
DEFAULT_TEXT_DIRECTION	Defines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style.
LINE_HEIGHT	Defines the default line height for text labels.
WORD_WRAP	Defines the CSS value for the word-wrap property.
ABSOLUTE_LINE_HEIGHT	Specifies if absolute line heights should be used (px) in CSS.
DEFAULT_FONTSTYLE	Defines the default style for all fonts.
DEFAULT_STARTSIZE	Defines the default start size for swimlanes.
DEFAULT_MARKERSIZE	Defines the default size for all markers.
DEFAULT_IMAGESIZE	Defines the default width and height for images used in the label shape.
ENTITY_SEGMENT	Defines the length of the horizontal segment of an Entity Relation.
RECTANGLE_ROUNDING_FACTOR	Defines the rounding factor for rounded rectangles in percent between 0 and 1.
LINE_ARCSIZE	Defines the size of the arcs for rounded edges.
ARROW_SPACING	Defines the spacing between the arrow shape and its terminals.
ARROW_WIDTH	Defines the width of the arrow shape.
ARROW_SIZE	Defines the size of the arrowhead in the arrow shape.
PAGE_FORMAT_A4_PORTRAIT	Defines the rectangle for the A4 portrait page format.
PAGE_FORMAT_A4_PORTRAIT	Defines the rectangle for the A4 portrait page format.
PAGE_FORMAT_LETTER_PORTRAIT	Defines the rectangle for the Letter portrait page format.
PAGE_FORMAT_LETTER_PORTRAIT	Defines the rectangle for the Letter portrait page format.
NONE	Defines the value for none.
STYLE_PERIMETER	Defines the key for the perimeter style.
STYLE_SOURCE_PORT	Defines the ID of the cell that should be used for computing the perimeter point of the source for an edge.
STYLE_TARGET_PORT	Defines the ID of the cell that should be used for computing the perimeter point of the target for an edge.
STYLE_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to cells in.
STYLE_PORT_CONSTRAINT_ROTATION	Define whether port constraint directions are rotated with vertex rotation.
STYLE_SOURCE_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to sources in.
STYLE_TARGET_PORT_CONSTRAINT	Defines the direction(s) that edges are allowed to connect to targets in.
STYLE_OPACITY	Defines the key for the opacity style.
STYLE_FILL_OPACITY	Defines the key for the fill opacity style.
STYLE_STROKE_OPACITY	Defines the key for the stroke opacity style.
STYLE_TEXT_OPACITY	Defines the key for the text opacity style.
STYLE_TEXT_DIRECTION	Defines the key for the text direction style.
STYLE_OVERFLOW	Defines the key for the overflow style.
STYLE_ORTHOGONAL	Defines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location.
STYLE_EXIT_X	Defines the key for the horizontal relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_Y	Defines the key for the vertical relative coordinate connection point of an edge with its source terminal.
STYLE_EXIT_DX	Defines the key for the horizontal offset of the connection point of an edge with its source terminal.
STYLE_EXIT_DY	Defines the key for the vertical offset of the connection point of an edge with its source terminal.
STYLE_EXIT_PERIMETER	Defines if the perimeter should be used to find the exact entry point along the perimeter of the source.
STYLE_ENTRY_X	Defines the key for the horizontal relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_Y	Defines the key for the vertical relative coordinate connection point of an edge with its target terminal.
STYLE_ENTRY_DX	Defines the key for the horizontal offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_DY	Defines the key for the vertical offset of the connection point of an edge with its target terminal.
STYLE_ENTRY_PERIMETER	Defines if the perimeter should be used to find the exact entry point along the perimeter of the target.
STYLE_WHITE_SPACE	Defines the key for the white-space style.
STYLE_ROTATION	Defines the key for the rotation style.
STYLE_FILLCOLOR	Defines the key for the fill color.
STYLE_POINTER_EVENTS	Specifies if pointer events should be fired on transparent backgrounds.
STYLE_SWIMLANE_FILLCOLOR	Defines the key for the fill color of the swimlane background.
STYLE_MARGIN	Defines the key for the margin between the ellipses in the double ellipse shape.
STYLE_GRADIENTCOLOR	Defines the key for the gradient color.
STYLE_GRADIENT_DIRECTION	Defines the key for the gradient direction.
STYLE_STROKECOLOR	Defines the key for the strokeColor style.
STYLE_SEPARATORCOLOR	Defines the key for the separatorColor style.
STYLE_STROKEWIDTH	Defines the key for the strokeWidth style.
STYLE_ALIGN	Defines the key for the align style.
STYLE_VERTICAL_ALIGN	Defines the key for the verticalAlign style.
STYLE_LABEL_WIDTH	Defines the key for the width of the label if the label position is not center.
STYLE_LABEL_POSITION	Defines the key for the horizontal label position of vertices.
STYLE_VERTICAL_LABEL_POSITION	Defines the key for the vertical label position of vertices.
STYLE_IMAGE_ASPECT	Defines the key for the image aspect style.
STYLE_IMAGE_ALIGN	Defines the key for the align style.
STYLE_IMAGE_VERTICAL_ALIGN	Defines the key for the verticalAlign style.
STYLE_GLASS	Defines the key for the glass style.
STYLE_IMAGE	Defines the key for the image style.
STYLE_IMAGE_WIDTH	Defines the key for the imageWidth style.
STYLE_IMAGE_HEIGHT	Defines the key for the imageHeight style.
STYLE_IMAGE_BACKGROUND	Defines the key for the image background color.
STYLE_IMAGE_BORDER	Defines the key for the image border color.
STYLE_FLIPH	Defines the key for the horizontal image flip.
STYLE_FLIPV	Defines the key for the vertical flip.
STYLE_NOLABEL	Defines the key for the noLabel style.
STYLE_NOEDGESTYLE	Defines the key for the noEdgeStyle style.
STYLE_LABEL_BACKGROUNDCOLOR	Defines the key for the label background color.
STYLE_LABEL_BORDERCOLOR	Defines the key for the label border color.
STYLE_LABEL_PADDING	Defines the key for the label padding, ie.
STYLE_INDICATOR_SHAPE	Defines the key for the indicator shape used within an mxLabel.
STYLE_INDICATOR_IMAGE	Defines the key for the indicator image used within an mxLabel.
STYLE_INDICATOR_COLOR	Defines the key for the indicatorColor style.
STYLE_INDICATOR_STROKECOLOR	Defines the key for the indicator stroke color in mxLabel.
STYLE_INDICATOR_GRADIENTCOLOR	Defines the key for the indicatorGradientColor style.
STYLE_INDICATOR_SPACING	The defines the key for the spacing between the label and the indicator in mxLabel.
STYLE_INDICATOR_WIDTH	Defines the key for the indicator width.
STYLE_INDICATOR_HEIGHT	Defines the key for the indicator height.
STYLE_INDICATOR_DIRECTION	Defines the key for the indicatorDirection style.
STYLE_SHADOW	Defines the key for the shadow style.
STYLE_SEGMENT	Defines the key for the segment style.
STYLE_ENDARROW	Defines the key for the end arrow marker.
STYLE_STARTARROW	Defines the key for the start arrow marker.
STYLE_ENDSIZE	Defines the key for the endSize style.
STYLE_STARTSIZE	Defines the key for the startSize style.
STYLE_SWIMLANE_LINE	Defines the key for the swimlaneLine style.
STYLE_ENDFILL	Defines the key for the endFill style.
STYLE_STARTFILL	Defines the key for the startFill style.
STYLE_DASHED	Defines the key for the dashed style.
STYLE_FIX_DASH	Defines the key for the fixDash style.
STYLE_ROUNDED	Defines the key for the rounded style.
STYLE_CURVED	Defines the key for the curved style.
STYLE_ARCSIZE	Defines the rounding factor for a rounded rectangle in percent (without the percent sign).
STYLE_ABSOLUTE_ARCSIZE	Defines the key for the absolute arc size style.
STYLE_SOURCE_PERIMETER_SPACING	Defines the key for the source perimeter spacing.
STYLE_TARGET_PERIMETER_SPACING	Defines the key for the target perimeter spacing.
STYLE_PERIMETER_SPACING	Defines the key for the perimeter spacing.
STYLE_SPACING	Defines the key for the spacing.
STYLE_SPACING_TOP	Defines the key for the spacingTop style.
STYLE_SPACING_LEFT	Defines the key for the spacingLeft style.
STYLE_SPACING_BOTTOM	Defines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only).
STYLE_SPACING_RIGHT	Defines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only).
STYLE_HORIZONTAL	Defines the key for the horizontal style.
STYLE_DIRECTION	Defines the key for the direction style.
STYLE_ANCHOR_POINT_DIRECTION	Defines the key for the anchorPointDirection style.
STYLE_ELBOW	Defines the key for the elbow style.
STYLE_FONTCOLOR	Defines the key for the fontColor style.
STYLE_FONTFAMILY	Defines the key for the fontFamily style.
STYLE_FONTSIZE	Defines the key for the fontSize style (in px).
STYLE_FONTSTYLE	Defines the key for the fontStyle style.
STYLE_ASPECT	Defines the key for the aspect style.
STYLE_AUTOSIZE	Defines the key for the autosize style.
STYLE_FOLDABLE	Defines the key for the foldable style.
STYLE_EDITABLE	Defines the key for the editable style.
STYLE_BACKGROUND_OUTLINE	Defines the key for the backgroundOutline style.
STYLE_BENDABLE	Defines the key for the bendable style.
STYLE_MOVABLE	Defines the key for the movable style.
STYLE_RESIZABLE	Defines the key for the resizable style.
STYLE_RESIZE_WIDTH	Defines the key for the resizeWidth style.
STYLE_RESIZE_WIDTH	Defines the key for the resizeHeight style.
STYLE_ROTATABLE	Defines the key for the rotatable style.
STYLE_CLONEABLE	Defines the key for the cloneable style.
STYLE_DELETABLE	Defines the key for the deletable style.
STYLE_SHAPE	Defines the key for the shape.
STYLE_EDGE	Defines the key for the edge style.
STYLE_JETTY_SIZE	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_SOURCE_JETTY_SIZE	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
targetJettySize	Defines the key for the jetty size in mxEdgeStyle.OrthConnector.
STYLE_LOOP	Defines the key for the loop style.
STYLE_ORTHOGONAL_LOOP	Defines the key for the orthogonal loop style.
STYLE_ROUTING_CENTER_X	Defines the key for the horizontal routing center.
STYLE_ROUTING_CENTER_Y	Defines the key for the vertical routing center.
FONT_BOLD	Constant for bold fonts.
FONT_ITALIC	Constant for italic fonts.
FONT_UNDERLINE	Constant for underlined fonts.
SHAPE_RECTANGLE	Name under which mxRectangleShape is registered in mxCellRenderer.
SHAPE_ELLIPSE	Name under which mxEllipse is registered in mxCellRenderer.
SHAPE_DOUBLE_ELLIPSE	Name under which mxDoubleEllipse is registered in mxCellRenderer.
SHAPE_RHOMBUS	Name under which mxRhombus is registered in mxCellRenderer.
SHAPE_LINE	Name under which mxLine is registered in mxCellRenderer.
SHAPE_IMAGE	Name under which mxImageShape is registered in mxCellRenderer.
SHAPE_ARROW	Name under which mxArrow is registered in mxCellRenderer.
SHAPE_ARROW_CONNECTOR	Name under which mxArrowConnector is registered in mxCellRenderer.
SHAPE_LABEL	Name under which mxLabel is registered in mxCellRenderer.
SHAPE_CYLINDER	Name under which mxCylinder is registered in mxCellRenderer.
SHAPE_SWIMLANE	Name under which mxSwimlane is registered in mxCellRenderer.
SHAPE_CONNECTOR	Name under which mxConnector is registered in mxCellRenderer.
SHAPE_ACTOR	Name under which mxActor is registered in mxCellRenderer.
SHAPE_CLOUD	Name under which mxCloud is registered in mxCellRenderer.
SHAPE_TRIANGLE	Name under which mxTriangle is registered in mxCellRenderer.
SHAPE_HEXAGON	Name under which mxHexagon is registered in mxCellRenderer.
ARROW_CLASSIC	Constant for classic arrow markers.
ARROW_CLASSIC_THIN	Constant for thin classic arrow markers.
ARROW_BLOCK	Constant for block arrow markers.
ARROW_BLOCK_THIN	Constant for thin block arrow markers.
ARROW_OPEN	Constant for open arrow markers.
ARROW_OPEN_THIN	Constant for thin open arrow markers.
ARROW_OVAL	Constant for oval arrow markers.
ARROW_DIAMOND	Constant for diamond arrow markers.
ARROW_DIAMOND_THIN	Constant for thin diamond arrow markers.
ALIGN_LEFT	Constant for left horizontal alignment.
ALIGN_CENTER	Constant for center horizontal alignment.
ALIGN_RIGHT	Constant for right horizontal alignment.
ALIGN_TOP	Constant for top vertical alignment.
ALIGN_MIDDLE	Constant for middle vertical alignment.
ALIGN_BOTTOM	Constant for bottom vertical alignment.
DIRECTION_NORTH	Constant for direction north.
DIRECTION_SOUTH	Constant for direction south.
DIRECTION_EAST	Constant for direction east.
DIRECTION_WEST	Constant for direction west.
TEXT_DIRECTION_DEFAULT	Constant for text direction default.
TEXT_DIRECTION_AUTO	Constant for text direction automatic.
TEXT_DIRECTION_LTR	Constant for text direction left to right.
TEXT_DIRECTION_RTL	Constant for text direction right to left.
DIRECTION_MASK_NONE	Constant for no direction.
DIRECTION_MASK_WEST	Bitwise mask for west direction.
DIRECTION_MASK_NORTH	Bitwise mask for north direction.
DIRECTION_MASK_SOUTH	Bitwise mask for south direction.
DIRECTION_MASK_EAST	Bitwise mask for east direction.
DIRECTION_MASK_ALL	Bitwise mask for all directions.
ELBOW_VERTICAL	Constant for elbow vertical.
ELBOW_HORIZONTAL	Constant for elbow horizontal.
EDGESTYLE_ELBOW	Name of the elbow edge style.
EDGESTYLE_ENTITY_RELATION	Name of the entity relation edge style.
EDGESTYLE_LOOP	Name of the loop edge style.
EDGESTYLE_SIDETOSIDE	Name of the side to side edge style.
EDGESTYLE_TOPTOBOTTOM	Name of the top to bottom edge style.
EDGESTYLE_ORTHOGONAL	Name of the generic orthogonal edge style.
EDGESTYLE_SEGMENT	Name of the generic segment edge style.
PERIMETER_ELLIPSE	Name of the ellipse perimeter.
PERIMETER_RECTANGLE	Name of the rectangle perimeter.
PERIMETER_RHOMBUS	Name of the rhombus perimeter.
PERIMETER_HEXAGON	Name of the hexagon perimeter.
PERIMETER_TRIANGLE	Name of the triangle perimeter.

Variables

DEFAULT_HOTSPOT

Defines the portion of the cell which is to be used as a connectable region. Default is 0.3. Possible values are 0 < x <= 1.

MIN_HOTSPOT_SIZE

Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region. Default is 8.

MAX_HOTSPOT_SIZE

Defines the maximum size in pixels of the portion of the cell which is to be used as a connectable region. Use 0 for no maximum. Default is 0.

RENDERING_HINT_EXACT

Defines the exact rendering hint.

RENDERING_HINT_FASTER

Defines the faster rendering hint.

RENDERING_HINT_FASTEST

Defines the fastest rendering hint.

DIALECT_SVG

Defines the SVG display dialect name.

DIALECT_VML

Defines the VML display dialect name.

DIALECT_MIXEDHTML

Defines the mixed HTML display dialect name.

DIALECT_PREFERHTML

Defines the preferred HTML display dialect name.

DIALECT_STRICTHTML

Defines the strict HTML display dialect.

NS_SVG

Defines the SVG namespace.

NS_XHTML

Defines the XHTML namespace.

NS_XLINK

Defines the XLink namespace.

SHADOWCOLOR

Defines the color to be used to draw shadows in shapes and windows. Default is gray.

VML_SHADOWCOLOR

Used for shadow color in filters where transparency is not supported (Microsoft Internet Explorer). Default is gray.

SHADOW_OFFSET_X

Specifies the x-offset of the shadow. Default is 2.

SHADOW_OFFSET_Y

Specifies the y-offset of the shadow. Default is 3.

SHADOW_OPACITY

Defines the opacity for shadows. Default is 1.

NODETYPE_ELEMENT

DOM node of type ELEMENT.

NODETYPE_ATTRIBUTE

DOM node of type ATTRIBUTE.

NODETYPE_TEXT

DOM node of type TEXT.

NODETYPE_CDATA

DOM node of type CDATA.

NODETYPE_ENTITY_REFERENCE

DOM node of type ENTITY_REFERENCE.

NODETYPE_ENTITY

DOM node of type ENTITY.

NODETYPE_PROCESSING_INSTRUCTION

DOM node of type PROCESSING_INSTRUCTION.

NODETYPE_COMMENT

DOM node of type COMMENT.

NODETYPE_DOCUMENT

DOM node of type DOCUMENT.

NODETYPE_DOCUMENTTYPE

DOM node of type DOCUMENTTYPE.

NODETYPE_DOCUMENT_FRAGMENT

DOM node of type DOCUMENT_FRAGMENT.

NODETYPE_NOTATION

DOM node of type NOTATION.

TOOLTIP_VERTICAL_OFFSET

Defines the vertical offset for the tooltip. Default is 16.

DEFAULT_VALID_COLOR

Specifies the default valid color. Default is #0000FF.

DEFAULT_INVALID_COLOR

Specifies the default invalid color. Default is #FF0000.

OUTLINE_HIGHLIGHT_COLOR

Specifies the default highlight color for shape outlines. Default is #0000FF. This is used in mxEdgeHandler.

OUTLINE_HIGHLIGHT_COLOR

Defines the strokewidth to be used for shape outlines. Default is 5. This is used in mxEdgeHandler.

HIGHLIGHT_STROKEWIDTH

Defines the strokewidth to be used for the highlights. Default is 3.

CONSTRAINT_HIGHLIGHT_SIZE

Size of the constraint highlight (in px). Default is 2.

HIGHLIGHT_OPACITY

Opacity (in %) used for the highlights (including outline). Default is 100.

CURSOR_MOVABLE_VERTEX

Defines the cursor for a movable vertex. Default is ‘move’.

CURSOR_MOVABLE_EDGE

Defines the cursor for a movable edge. Default is ‘move’.

CURSOR_LABEL_HANDLE

Defines the cursor for a movable label. Default is ‘default’.

CURSOR_TERMINAL_HANDLE

Defines the cursor for a terminal handle. Default is ‘pointer’.

CURSOR_BEND_HANDLE

Defines the cursor for a movable bend. Default is ‘crosshair’.

CURSOR_VIRTUAL_BEND_HANDLE

Defines the cursor for a movable bend. Default is ‘crosshair’.

CURSOR_CONNECT

Defines the cursor for a connectable state. Default is ‘pointer’.

HIGHLIGHT_COLOR

Defines the color to be used for the cell highlighting. Use ‘none’ for no color. Default is #00FF00.

TARGET_HIGHLIGHT_COLOR

Defines the color to be used for highlighting a target cell for a new or changed connection. Note that this may be either a source or target terminal in the graph. Use ‘none’ for no color. Default is #0000FF.

INVALID_CONNECT_TARGET_COLOR

Defines the color to be used for highlighting a invalid target cells for a new or changed connections. Note that this may be either a source or target terminal in the graph. Use ‘none’ for no color. Default is #FF0000.

DROP_TARGET_COLOR

Defines the color to be used for the highlighting target parent cells (for drag and drop). Use ‘none’ for no color. Default is #0000FF.

VALID_COLOR

Defines the color to be used for the coloring valid connection previews. Use ‘none’ for no color. Default is #FF0000.

INVALID_COLOR

Defines the color to be used for the coloring invalid connection previews. Use ‘none’ for no color. Default is #FF0000.

EDGE_SELECTION_COLOR

Defines the color to be used for the selection border of edges. Use ‘none’ for no color. Default is #00FF00.

VERTEX_SELECTION_COLOR

Defines the color to be used for the selection border of vertices. Use ‘none’ for no color. Default is #00FF00.

VERTEX_SELECTION_STROKEWIDTH

Defines the strokewidth to be used for vertex selections. Default is 1.

EDGE_SELECTION_STROKEWIDTH

Defines the strokewidth to be used for edge selections. Default is 1.

SELECTION_DASHED

Defines the dashed state to be used for the vertex selection border. Default is true.

SELECTION_DASHED

Defines the dashed state to be used for the edge selection border. Default is true.

GUIDE_COLOR

Defines the color to be used for the guidelines in mxGraphHandler. Default is #FF0000.

GUIDE_STROKEWIDTH

Defines the strokewidth to be used for the guidelines in mxGraphHandler. Default is 1.

OUTLINE_COLOR

Defines the color to be used for the outline rectangle border. Use ‘none’ for no color. Default is #0099FF.

OUTLINE_STROKEWIDTH

Defines the strokewidth to be used for the outline rectangle stroke width. Default is 3.

HANDLE_SIZE

Defines the default size for handles. Default is 6.

LABEL_HANDLE_SIZE

Defines the default size for label handles. Default is 4.

HANDLE_FILLCOLOR

Defines the color to be used for the handle fill color. Use ‘none’ for no color. Default is #00FF00 (green).

HANDLE_STROKECOLOR

Defines the color to be used for the handle stroke color. Use ‘none’ for no color. Default is black.

LABEL_HANDLE_FILLCOLOR

Defines the color to be used for the label handle fill color. Use ‘none’ for no color. Default is yellow.

CONNECT_HANDLE_FILLCOLOR

Defines the color to be used for the connect handle fill color. Use ‘none’ for no color. Default is #0000FF (blue).

LOCKED_HANDLE_FILLCOLOR

Defines the color to be used for the locked handle fill color. Use ‘none’ for no color. Default is #FF0000 (red).

OUTLINE_HANDLE_FILLCOLOR

Defines the color to be used for the outline sizer fill color. Use ‘none’ for no color. Default is #00FFFF.

OUTLINE_HANDLE_STROKECOLOR

Defines the color to be used for the outline sizer stroke color. Use ‘none’ for no color. Default is #0033FF.

DEFAULT_FONTFAMILY

Defines the default family for all fonts. Default is Arial,Helvetica.

DEFAULT_FONTSIZE

Defines the default size (in px). Default is 11.

DEFAULT_TEXT_DIRECTION

Defines the default value for the STYLE_TEXT_DIRECTION if no value is defined for it in the style. Default value is an empty string which means the default system setting is used and no direction is set.

LINE_HEIGHT

Defines the default line height for text labels. Default is 1.2.

WORD_WRAP

Defines the CSS value for the word-wrap property. Default is “normal”. Change this to “break-word” to allow long words to be able to be broken and wrap onto the next line.

ABSOLUTE_LINE_HEIGHT

Specifies if absolute line heights should be used (px) in CSS. Default is false. Set this to true for backwards compatibility.

DEFAULT_FONTSTYLE

Defines the default style for all fonts. Default is 0. This can be set to any combination of font styles as follows.

mxConstants.DEFAULT_FONTSTYLE = mxConstants.FONT_BOLD | mxConstants.FONT_ITALIC;

DEFAULT_STARTSIZE

Defines the default start size for swimlanes. Default is 40.

DEFAULT_MARKERSIZE

Defines the default size for all markers. Default is 6.

DEFAULT_IMAGESIZE

Defines the default width and height for images used in the label shape. Default is 24.

ENTITY_SEGMENT

Defines the length of the horizontal segment of an Entity Relation. This can be overridden using mxConstants.STYLE_SEGMENT style. Default is 30.

RECTANGLE_ROUNDING_FACTOR

Defines the rounding factor for rounded rectangles in percent between 0 and 1. Values should be smaller than 0.5. Default is 0.15.

LINE_ARCSIZE

Defines the size of the arcs for rounded edges. Default is 20.

ARROW_SPACING

Defines the spacing between the arrow shape and its terminals. Default is 0.

ARROW_WIDTH

Defines the width of the arrow shape. Default is 30.

ARROW_SIZE

Defines the size of the arrowhead in the arrow shape. Default is 30.

PAGE_FORMAT_A4_PORTRAIT

Defines the rectangle for the A4 portrait page format. The dimensions of this page format are 826x1169 pixels.

PAGE_FORMAT_A4_PORTRAIT

Defines the rectangle for the A4 portrait page format. The dimensions of this page format are 826x1169 pixels.

PAGE_FORMAT_LETTER_PORTRAIT

Defines the rectangle for the Letter portrait page format. The dimensions of this page format are 850x1100 pixels.

PAGE_FORMAT_LETTER_PORTRAIT

Defines the rectangle for the Letter portrait page format. The dimensions of this page format are 850x1100 pixels.

NONE

Defines the value for none. Default is “none”.

STYLE_PERIMETER

Defines the key for the perimeter style. This is a function that defines the perimeter around a particular shape. Possible values are the functions defined in mxPerimeter. Alternatively, the constants in this class that start with “PERIMETER_” may be used to access perimeter styles in mxStyleRegistry. Value is “perimeter”.

STYLE_SOURCE_PORT

Defines the ID of the cell that should be used for computing the perimeter point of the source for an edge. This allows for graphically connecting to a cell while keeping the actual terminal of the edge. Value is “sourcePort”.

STYLE_TARGET_PORT

Defines the ID of the cell that should be used for computing the perimeter point of the target for an edge. This allows for graphically connecting to a cell while keeping the actual terminal of the edge. Value is “targetPort”.

STYLE_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to cells in. Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”. Value is “portConstraint”.

STYLE_PORT_CONSTRAINT_ROTATION

Define whether port constraint directions are rotated with vertex rotation. 0 (default) causes port constraints to remain absolute, relative to the graph, 1 causes the constraints to rotate with the vertex. Value is “portConstraintRotation”.

STYLE_SOURCE_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to sources in. Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”. Value is “sourcePortConstraint”.

STYLE_TARGET_PORT_CONSTRAINT

Defines the direction(s) that edges are allowed to connect to targets in. Possible values are “DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST” and “DIRECTION_WEST”. Value is “targetPortConstraint”.

STYLE_OPACITY

Defines the key for the opacity style. The type of the value is numeric and the possible range is 0-100. Value is “opacity”.

STYLE_FILL_OPACITY

Defines the key for the fill opacity style. The type of the value is numeric and the possible range is 0-100. Value is “fillOpacity”.

STYLE_STROKE_OPACITY

Defines the key for the stroke opacity style. The type of the value is numeric and the possible range is 0-100. Value is “strokeOpacity”.

STYLE_TEXT_OPACITY

Defines the key for the text opacity style. The type of the value is numeric and the possible range is 0-100. Value is “textOpacity”.

STYLE_TEXT_DIRECTION

Defines the key for the text direction style. Possible values are “TEXT_DIRECTION_DEFAULT, TEXT_DIRECTION_AUTO, TEXT_DIRECTION_LTR” and “TEXT_DIRECTION_RTL”. Value is “textDirection”. The default value for the style is defined in DEFAULT_TEXT_DIRECTION. It is used is no value is defined for this key in a given style. This is an experimental style that is currently ignored in the backends.

STYLE_OVERFLOW

Defines the key for the overflow style. Possible values are ‘visible’, ‘hidden’, ‘fill’ and ‘width’. The default value is ‘visible’. This value specifies how overlapping vertex labels are handled. A value of ‘visible’ will show the complete label. A value of ‘hidden’ will clip the label so that it does not overlap the vertex bounds. A value of ‘fill’ will use the vertex bounds and a value of ‘width’ will use the the vertex width for the label. See mxGraph.isLabelClipped. Note that the vertical alignment is ignored for overflow fill and for horizontal alignment, left should be used to avoid pixel offsets in Internet Explorer 11 and earlier or if foreignObjects are disabled. Value is “overflow”.

STYLE_ORTHOGONAL

Defines if the connection points on either end of the edge should be computed so that the edge is vertical or horizontal if possible and if the point is not at a fixed location. Default is false. This is used in mxGraph.isOrthogonal, which also returns true if the edgeStyle of the edge is an elbow or entity. Value is “orthogonal”.

STYLE_EXIT_X

Defines the key for the horizontal relative coordinate connection point of an edge with its source terminal. Value is “exitX”.

STYLE_EXIT_Y

Defines the key for the vertical relative coordinate connection point of an edge with its source terminal. Value is “exitY”.

STYLE_EXIT_DX

Defines the key for the horizontal offset of the connection point of an edge with its source terminal. Value is “exitDx”.

STYLE_EXIT_DY

Defines the key for the vertical offset of the connection point of an edge with its source terminal. Value is “exitDy”.

STYLE_EXIT_PERIMETER

Defines if the perimeter should be used to find the exact entry point along the perimeter of the source. Possible values are 0 (false) and 1 (true). Default is 1 (true). Value is “exitPerimeter”.

STYLE_ENTRY_X

Defines the key for the horizontal relative coordinate connection point of an edge with its target terminal. Value is “entryX”.

STYLE_ENTRY_Y

Defines the key for the vertical relative coordinate connection point of an edge with its target terminal. Value is “entryY”.

STYLE_ENTRY_DX

Defines the key for the horizontal offset of the connection point of an edge with its target terminal. Value is “entryDx”.

STYLE_ENTRY_DY

Defines the key for the vertical offset of the connection point of an edge with its target terminal. Value is “entryDy”.

STYLE_ENTRY_PERIMETER

Defines if the perimeter should be used to find the exact entry point along the perimeter of the target. Possible values are 0 (false) and 1 (true). Default is 1 (true). Value is “entryPerimeter”.

STYLE_WHITE_SPACE

Defines the key for the white-space style. Possible values are ‘nowrap’ and ‘wrap’. The default value is ‘nowrap’. This value specifies how white-space inside a HTML vertex label should be handled. A value of ‘nowrap’ means the text will never wrap to the next line until a linefeed is encountered. A value of ‘wrap’ means text will wrap when necessary. This style is only used for HTML labels. See mxGraph.isWrapping. Value is “whiteSpace”.

STYLE_ROTATION

Defines the key for the rotation style. The type of the value is numeric and the possible range is 0-360. Value is “rotation”.

STYLE_FILLCOLOR

Defines the key for the fill color. Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’ or ‘indicated’ to use the color code of a related cell or the indicator shape. Value is “fillColor”.

STYLE_POINTER_EVENTS

Specifies if pointer events should be fired on transparent backgrounds. This style is currently only supported in mxRectangleShape. Default is true. Value is “pointerEvents”. This is typically set to false in groups where the transparent part should allow any underlying cells to be clickable.

STYLE_SWIMLANE_FILLCOLOR

Defines the key for the fill color of the swimlane background. Possible values are all HTML color names or HEX codes. Default is no background. Value is “swimlaneFillColor”.

STYLE_MARGIN

Defines the key for the margin between the ellipses in the double ellipse shape. Possible values are all positive numbers. Value is “margin”.

STYLE_GRADIENTCOLOR

Defines the key for the gradient color. Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’ or ‘indicated’ to use the color code of a related cell or the indicator shape. This is ignored if no fill color is defined. Value is “gradientColor”.

STYLE_GRADIENT_DIRECTION

Defines the key for the gradient direction. Possible values are DIRECTION_EAST, DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH. Default is DIRECTION_SOUTH. Generally, and by default in mxGraph, gradient painting is done from the value of STYLE_FILLCOLOR to the value of STYLE_GRADIENTCOLOR. Taking the example of DIRECTION_NORTH, this means STYLE_FILLCOLOR color at the bottom of paint pattern and STYLE_GRADIENTCOLOR at top, with a gradient in-between. Value is “gradientDirection”.

STYLE_STROKECOLOR

Defines the key for the strokeColor style. Possible values are all HTML color names or HEX codes, as well as special keywords such as ‘swimlane, ‘inherit’, ‘indicated’ to use the color code of a related cell or the indicator shape or ‘none’ for no color. Value is “strokeColor”.

STYLE_SEPARATORCOLOR

Defines the key for the separatorColor style. Possible values are all HTML color names or HEX codes. This style is only used for SHAPE_SWIMLANE shapes. Value is “separatorColor”.

STYLE_STROKEWIDTH

Defines the key for the strokeWidth style. The type of the value is numeric and the possible range is any non-negative value larger or equal to 1. The value defines the stroke width in pixels. Note: To hide a stroke use strokeColor none. Value is “strokeWidth”.

STYLE_ALIGN

Defines the key for the align style. Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT. This value defines how the lines of the label are horizontally aligned. ALIGN_LEFT mean label text lines are aligned to left of the label bounds, ALIGN_RIGHT to the right of the label bounds and ALIGN_CENTER means the center of the text lines are aligned in the center of the label bounds. Note this value doesn’t affect the positioning of the overall label bounds relative to the vertex, to move the label bounds horizontally, use STYLE_LABEL_POSITION. Value is “align”.

STYLE_VERTICAL_ALIGN

Defines the key for the verticalAlign style. Possible values are ALIGN_TOP, ALIGN_MIDDLE and ALIGN_BOTTOM. This value defines how the lines of the label are vertically aligned. ALIGN_TOP means the topmost label text line is aligned against the top of the label bounds, ALIGN_BOTTOM means the bottom-most label text line is aligned against the bottom of the label bounds and ALIGN_MIDDLE means there is equal spacing between the topmost text label line and the top of the label bounds and the bottom-most text label line and the bottom of the label bounds. Note this value doesn’t affect the positioning of the overall label bounds relative to the vertex, to move the label bounds vertically, use STYLE_VERTICAL_LABEL_POSITION. Value is “verticalAlign”.

STYLE_LABEL_WIDTH

Defines the key for the width of the label if the label position is not center. Value is “labelWidth”.

STYLE_LABEL_POSITION

Defines the key for the horizontal label position of vertices. Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT. Default is ALIGN_CENTER. The label align defines the position of the label relative to the cell. ALIGN_LEFT means the entire label bounds is placed completely just to the left of the vertex, ALIGN_RIGHT means adjust to the right and ALIGN_CENTER means the label bounds are vertically aligned with the bounds of the vertex. Note this value doesn’t affect the positioning of label within the label bounds, to move the label horizontally within the label bounds, use STYLE_ALIGN. Value is “labelPosition”.

STYLE_VERTICAL_LABEL_POSITION

Defines the key for the vertical label position of vertices. Possible values are ALIGN_TOP, ALIGN_BOTTOM and ALIGN_MIDDLE. Default is ALIGN_MIDDLE. The label align defines the position of the label relative to the cell. ALIGN_TOP means the entire label bounds is placed completely just on the top of the vertex, ALIGN_BOTTOM means adjust on the bottom and ALIGN_MIDDLE means the label bounds are horizontally aligned with the bounds of the vertex. Note this value doesn’t affect the positioning of label within the label bounds, to move the label vertically within the label bounds, use STYLE_VERTICAL_ALIGN. Value is “verticalLabelPosition”.

STYLE_IMAGE_ASPECT

Defines the key for the image aspect style. Possible values are 0 (do not preserve aspect) or 1 (keep aspect). This is only used in mxImageShape. Default is 1. Value is “imageAspect”.

STYLE_IMAGE_ALIGN

Defines the key for the align style. Possible values are ALIGN_LEFT, ALIGN_CENTER and ALIGN_RIGHT. The value defines how any image in the vertex label is aligned horizontally within the label bounds of a SHAPE_LABEL shape. Value is “imageAlign”.

STYLE_IMAGE_VERTICAL_ALIGN

Defines the key for the verticalAlign style. Possible values are ALIGN_TOP, ALIGN_MIDDLE and ALIGN_BOTTOM. The value defines how any image in the vertex label is aligned vertically within the label bounds of a SHAPE_LABEL shape. Value is “imageVerticalAlign”.

STYLE_GLASS

Defines the key for the glass style. Possible values are 0 (disabled) and 1(enabled). The default value is 0. This is used in mxLabel. Value is “glass”.

STYLE_IMAGE

Defines the key for the image style. Possible values are any image URL, the type of the value is String. This is the path to the image that is to be displayed within the label of a vertex. Data URLs should use the following format: data:image/png,xyz where xyz is the base64 encoded data (without the “base64”-prefix). Note that Data URLs are only supported in modern browsers. Value is “image”.

STYLE_IMAGE_WIDTH

Defines the key for the imageWidth style. The type of this value is int, the value is the image width in pixels and must be greater than 0. Value is “imageWidth”.

STYLE_IMAGE_HEIGHT

Defines the key for the imageHeight style. The type of this value is int, the value is the image height in pixels and must be greater than 0. Value is “imageHeight”.

STYLE_IMAGE_BACKGROUND

Defines the key for the image background color. This style is only used in mxImageShape. Possible values are all HTML color names or HEX codes. Value is “imageBackground”.

STYLE_IMAGE_BORDER

Defines the key for the image border color. This style is only used in mxImageShape. Possible values are all HTML color names or HEX codes. Value is “imageBorder”.

STYLE_FLIPH

Defines the key for the horizontal image flip. This style is only used in mxImageShape. Possible values are 0 and 1. Default is 0. Value is “flipH”.

STYLE_FLIPV

Defines the key for the vertical flip. Possible values are 0 and 1. Default is 0. Value is “flipV”.

STYLE_NOLABEL

Defines the key for the noLabel style. If this is true then no label is visible for a given cell. Possible values are true or false (1 or 0). Default is false. Value is “noLabel”.

STYLE_NOEDGESTYLE

Defines the key for the noEdgeStyle style. If this is true then no edge style is applied for a given edge. Possible values are true or false (1 or 0). Default is false. Value is “noEdgeStyle”.

STYLE_LABEL_BACKGROUNDCOLOR

Defines the key for the label background color. Possible values are all HTML color names or HEX codes. Value is “labelBackgroundColor”.

STYLE_LABEL_BORDERCOLOR

Defines the key for the label border color. Possible values are all HTML color names or HEX codes. Value is “labelBorderColor”.

STYLE_LABEL_PADDING

Defines the key for the label padding, ie. the space between the label border and the label. Value is “labelPadding”.

STYLE_INDICATOR_SHAPE

Defines the key for the indicator shape used within an mxLabel. Possible values are all SHAPE_* constants or the names of any new shapes. The indicatorShape has precedence over the indicatorImage. Value is “indicatorShape”.

STYLE_INDICATOR_IMAGE

Defines the key for the indicator image used within an mxLabel. Possible values are all image URLs. The indicatorShape has precedence over the indicatorImage. Value is “indicatorImage”.

STYLE_INDICATOR_COLOR

Defines the key for the indicatorColor style. Possible values are all HTML color names or HEX codes, as well as the special ‘swimlane’ keyword to refer to the color of the parent swimlane if one exists. Value is “indicatorColor”.

STYLE_INDICATOR_STROKECOLOR

Defines the key for the indicator stroke color in mxLabel. Possible values are all color codes. Value is “indicatorStrokeColor”.

STYLE_INDICATOR_GRADIENTCOLOR

Defines the key for the indicatorGradientColor style. Possible values are all HTML color names or HEX codes. This style is only supported in SHAPE_LABEL shapes. Value is “indicatorGradientColor”.

STYLE_INDICATOR_SPACING

The defines the key for the spacing between the label and the indicator in mxLabel. Possible values are in pixels. Value is “indicatorSpacing”.

STYLE_INDICATOR_WIDTH

Defines the key for the indicator width. Possible values start at 0 (in pixels). Value is “indicatorWidth”.

STYLE_INDICATOR_HEIGHT

Defines the key for the indicator height. Possible values start at 0 (in pixels). Value is “indicatorHeight”.

STYLE_INDICATOR_DIRECTION

Defines the key for the indicatorDirection style. The direction style is used to specify the direction of certain shapes (eg. mxTriangle). Possible values are DIRECTION_EAST (default), DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH. Value is “indicatorDirection”.

STYLE_SHADOW

Defines the key for the shadow style. The type of the value is Boolean. Value is “shadow”.

STYLE_SEGMENT

Defines the key for the segment style. The type of this value is float and the value represents the size of the horizontal segment of the entity relation style. Default is ENTITY_SEGMENT. Value is “segment”.

STYLE_ENDARROW

Defines the key for the end arrow marker. Possible values are all constants with an ARROW-prefix. This is only used in mxConnector. Value is “endArrow”.

Example

style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;

STYLE_STARTARROW

Defines the key for the start arrow marker. Possible values are all constants with an ARROW-prefix. This is only used in mxConnector. See STYLE_ENDARROW. Value is “startArrow”.

STYLE_ENDSIZE

Defines the key for the endSize style. The type of this value is numeric and the value represents the size of the end marker in pixels. Value is “endSize”.

STYLE_STARTSIZE

Defines the key for the startSize style. The type of this value is numeric and the value represents the size of the start marker or the size of the swimlane title region depending on the shape it is used for. Value is “startSize”.

STYLE_SWIMLANE_LINE

Defines the key for the swimlaneLine style. This style specifies whether the line between the title regio of a swimlane should be visible. Use 0 for hidden or 1 (default) for visible. Value is “swimlaneLine”.

STYLE_ENDFILL

Defines the key for the endFill style. Use 0 for no fill or 1 (default) for fill. (This style is only exported via mxImageExport.) Value is “endFill”.

STYLE_STARTFILL

Defines the key for the startFill style. Use 0 for no fill or 1 (default) for fill. (This style is only exported via mxImageExport.) Value is “startFill”.

STYLE_DASHED

Defines the key for the dashed style. Use 0 (default) for non-dashed or 1 for dashed. Value is “dashed”.

STYLE_FIX_DASH

Defines the key for the fixDash style. Use 0 (default) for dash patterns that depend on the linewidth and 1 for dash patterns that ignore the line width. Value is “fixDash”.

STYLE_ROUNDED

Defines the key for the rounded style. The type of this value is Boolean. For edges this determines whether or not joins between edges segments are smoothed to a rounded finish. For vertices that have the rectangle shape, this determines whether or not the rectangle is rounded. Use 0 (default) for non-rounded or 1 for rounded. Value is “rounded”.

STYLE_CURVED

Defines the key for the curved style. The type of this value is Boolean. It is only applicable for connector shapes. Use 0 (default) for non-curved or 1 for curved. Value is “curved”.

STYLE_ARCSIZE

Defines the rounding factor for a rounded rectangle in percent (without the percent sign). Possible values are between 0 and 100. If this value is not specified then RECTANGLE_ROUNDING_FACTOR * 100 is used. For edges, this defines the absolute size of rounded corners in pixels. If this values is not specified then LINE_ARCSIZE is used. (This style is only exported via mxImageExport.) Value is “arcSize”.

STYLE_ABSOLUTE_ARCSIZE

Defines the key for the absolute arc size style. This specifies if arcSize for rectangles is abolute or relative. Possible values are 1 and 0 (default). Value is “absoluteArcSize”.

STYLE_SOURCE_PERIMETER_SPACING

Defines the key for the source perimeter spacing. The type of this value is numeric. This is the distance between the source connection point of an edge and the perimeter of the source vertex in pixels. This style only applies to edges. Value is “sourcePerimeterSpacing”.

STYLE_TARGET_PERIMETER_SPACING

Defines the key for the target perimeter spacing. The type of this value is numeric. This is the distance between the target connection point of an edge and the perimeter of the target vertex in pixels. This style only applies to edges. Value is “targetPerimeterSpacing”.

STYLE_PERIMETER_SPACING

Defines the key for the perimeter spacing. This is the distance between the connection point and the perimeter in pixels. When used in a vertex style, this applies to all incoming edges to floating ports (edges that terminate on the perimeter of the vertex). When used in an edge style, this spacing applies to the source and target separately, if they terminate in floating ports (on the perimeter of the vertex). Value is “perimeterSpacing”.

STYLE_SPACING

Defines the key for the spacing. The value represents the spacing, in pixels, added to each side of a label in a vertex (style applies to vertices only). Value is “spacing”.

STYLE_SPACING_TOP

Defines the key for the spacingTop style. The value represents the spacing, in pixels, added to the top side of a label in a vertex (style applies to vertices only). Value is “spacingTop”.

STYLE_SPACING_LEFT

Defines the key for the spacingLeft style. The value represents the spacing, in pixels, added to the left side of a label in a vertex (style applies to vertices only). Value is “spacingLeft”.

STYLE_SPACING_BOTTOM

Defines the key for the spacingBottom style The value represents the spacing, in pixels, added to the bottom side of a label in a vertex (style applies to vertices only). Value is “spacingBottom”.

STYLE_SPACING_RIGHT

Defines the key for the spacingRight style The value represents the spacing, in pixels, added to the right side of a label in a vertex (style applies to vertices only). Value is “spacingRight”.

STYLE_HORIZONTAL

Defines the key for the horizontal style. Possible values are true or false. This value only applies to vertices. If the STYLE_SHAPE is “SHAPE_SWIMLANE” a value of false indicates that the swimlane should be drawn vertically, true indicates to draw it horizontally. If the shape style does not indicate that this vertex is a swimlane, this value affects only whether the label is drawn horizontally or vertically. Value is “horizontal”.

STYLE_DIRECTION

Defines the key for the direction style. The direction style is used to specify the direction of certain shapes (eg. mxTriangle). Possible values are DIRECTION_EAST (default), DIRECTION_WEST, DIRECTION_NORTH and DIRECTION_SOUTH. Value is “direction”.

STYLE_ANCHOR_POINT_DIRECTION

Defines the key for the anchorPointDirection style. The defines if the direction style should be taken into account when computing the fixed point location for connected edges. Default is 1 (yes). Set this to 0 to ignore the direction style for fixed connection points. Value is “anchorPointDirection”.

STYLE_ELBOW

Defines the key for the elbow style. Possible values are ELBOW_HORIZONTAL and ELBOW_VERTICAL. Default is ELBOW_HORIZONTAL. This defines how the three segment orthogonal edge style leaves its terminal vertices. The vertical style leaves the terminal vertices at the top and bottom sides. Value is “elbow”.

STYLE_FONTCOLOR

Defines the key for the fontColor style. Possible values are all HTML color names or HEX codes. Value is “fontColor”.

STYLE_FONTFAMILY

Defines the key for the fontFamily style. Possible values are names such as Arial; Dialog; Verdana; Times New Roman. The value is of type String. Value is fontFamily.

STYLE_FONTSIZE

Defines the key for the fontSize style (in px). The type of the value is int. Value is “fontSize”.

STYLE_FONTSTYLE

Defines the key for the fontStyle style. Values may be any logical AND (sum) of FONT_BOLD, FONT_ITALIC and FONT_UNDERLINE. The type of the value is int. Value is “fontStyle”.

STYLE_ASPECT

Defines the key for the aspect style. Possible values are empty or fixed. If fixed is used then the aspect ratio of the cell will be maintained when resizing. Default is empty. Value is “aspect”.

STYLE_AUTOSIZE

Defines the key for the autosize style. This specifies if a cell should be resized automatically if the value has changed. Possible values are 0 or 1. Default is 0. See mxGraph.isAutoSizeCell. This is normally combined with STYLE_RESIZABLE to disable manual sizing. Value is “autosize”.

STYLE_FOLDABLE

Defines the key for the foldable style. This specifies if a cell is foldable using a folding icon. Possible values are 0 or 1. Default is 1. See mxGraph.isCellFoldable. Value is “foldable”.

STYLE_EDITABLE

Defines the key for the editable style. This specifies if the value of a cell can be edited using the in-place editor. Possible values are 0 or 1. Default is 1. See mxGraph.isCellEditable. Value is “editable”.

STYLE_BACKGROUND_OUTLINE

Defines the key for the backgroundOutline style. This specifies if a only the background of a cell should be painted when it is highlighted. Possible values are 0 or 1. Default is 0. Value is “backgroundOutline”.

STYLE_BENDABLE

Defines the key for the bendable style. This specifies if the control points of an edge can be moved. Possible values are 0 or 1. Default is 1. See mxGraph.isCellBendable. Value is “bendable”.

STYLE_MOVABLE

Defines the key for the movable style. This specifies if a cell can be moved. Possible values are 0 or 1. Default is 1. See mxGraph.isCellMovable. Value is “movable”.

STYLE_RESIZABLE

Defines the key for the resizable style. This specifies if a cell can be resized. Possible values are 0 or 1. Default is 1. See mxGraph.isCellResizable. Value is “resizable”.

STYLE_RESIZE_WIDTH

Defines the key for the resizeWidth style. This specifies if a cell’s width is resized if the parent is resized. If this is 1 then the width will be resized even if the cell’s geometry is relative. If this is 0 then the cell’s width will not be resized. Default is not defined. Value is “resizeWidth”.

STYLE_RESIZE_WIDTH

Defines the key for the resizeHeight style. This specifies if a cell’s height if resize if the parent is resized. If this is 1 then the height will be resized even if the cell’s geometry is relative. If this is 0 then the cell’s height will not be resized. Default is not defined. Value is “resizeHeight”.

STYLE_ROTATABLE

Defines the key for the rotatable style. This specifies if a cell can be rotated. Possible values are 0 or 1. Default is 1. See mxGraph.isCellRotatable. Value is “rotatable”.

STYLE_CLONEABLE

Defines the key for the cloneable style. This specifies if a cell can be cloned. Possible values are 0 or 1. Default is 1. See mxGraph.isCellCloneable. Value is “cloneable”.

STYLE_DELETABLE

Defines the key for the deletable style. This specifies if a cell can be deleted. Possible values are 0 or 1. Default is 1. See mxGraph.isCellDeletable. Value is “deletable”.

STYLE_SHAPE

Defines the key for the shape. Possible values are all constants with a SHAPE-prefix or any newly defined shape names. Value is “shape”.

STYLE_EDGE

Defines the key for the edge style. Possible values are the functions defined in mxEdgeStyle. Value is “edgeStyle”.

STYLE_JETTY_SIZE

Defines the key for the jetty size in mxEdgeStyle.OrthConnector. Default is 10. Possible values are all numeric values or “auto”. Jetty size is the minimum length of the orthogonal segment before it attaches to a shape. Value is “jettySize”.

STYLE_SOURCE_JETTY_SIZE

Defines the key for the jetty size in mxEdgeStyle.OrthConnector. Default is 10. Possible values are numeric values or “auto”. This has precedence over STYLE_JETTY_SIZE. Value is “sourceJettySize”.

targetJettySize

STYLE_LOOP

Defines the key for the loop style. Possible values are the functions defined in mxEdgeStyle. Value is “loopStyle”. Default is <mxGraph.defaultLoopStylean>.

STYLE_ORTHOGONAL_LOOP

Defines the key for the orthogonal loop style. Possible values are 0 and 1. Default is 0. Value is “orthogonalLoop”. Use this style to specify if loops with no waypoints and defined anchor points should be routed using STYLE_LOOP or not routed.

STYLE_ROUTING_CENTER_X

Defines the key for the horizontal routing center. Possible values are between -0.5 and 0.5. This is the relative offset from the center used for connecting edges. The type of this value is numeric. Value is “routingCenterX”.

STYLE_ROUTING_CENTER_Y

Defines the key for the vertical routing center. Possible values are between -0.5 and 0.5. This is the relative offset from the center used for connecting edges. The type of this value is numeric. Value is “routingCenterY”.

FONT_BOLD

Constant for bold fonts. Default is 1.

FONT_ITALIC

Constant for italic fonts. Default is 2.

FONT_UNDERLINE

Constant for underlined fonts. Default is 4.

SHAPE_RECTANGLE

Name under which mxRectangleShape is registered in mxCellRenderer. Default is rectangle.

SHAPE_ELLIPSE

Name under which mxEllipse is registered in mxCellRenderer. Default is ellipse.

SHAPE_DOUBLE_ELLIPSE

Name under which mxDoubleEllipse is registered in mxCellRenderer. Default is doubleEllipse.

SHAPE_RHOMBUS

Name under which mxRhombus is registered in mxCellRenderer. Default is rhombus.

SHAPE_LINE

Name under which mxLine is registered in mxCellRenderer. Default is line.

SHAPE_IMAGE

Name under which mxImageShape is registered in mxCellRenderer. Default is image.

SHAPE_ARROW

Name under which mxArrow is registered in mxCellRenderer. Default is arrow.

SHAPE_ARROW_CONNECTOR

Name under which mxArrowConnector is registered in mxCellRenderer. Default is arrowConnector.

SHAPE_LABEL

Name under which mxLabel is registered in mxCellRenderer. Default is label.

SHAPE_CYLINDER

Name under which mxCylinder is registered in mxCellRenderer. Default is cylinder.

SHAPE_SWIMLANE

Name under which mxSwimlane is registered in mxCellRenderer. Default is swimlane.

SHAPE_CONNECTOR

Name under which mxConnector is registered in mxCellRenderer. Default is connector.

SHAPE_ACTOR

Name under which mxActor is registered in mxCellRenderer. Default is actor.

SHAPE_CLOUD

Name under which mxCloud is registered in mxCellRenderer. Default is cloud.

SHAPE_TRIANGLE

Name under which mxTriangle is registered in mxCellRenderer. Default is triangle.

SHAPE_HEXAGON

Name under which mxHexagon is registered in mxCellRenderer. Default is hexagon.

ARROW_CLASSIC

Constant for classic arrow markers.

ARROW_CLASSIC_THIN

Constant for thin classic arrow markers.

ARROW_BLOCK

Constant for block arrow markers.

ARROW_BLOCK_THIN

Constant for thin block arrow markers.

ARROW_OPEN

Constant for open arrow markers.

ARROW_OPEN_THIN

Constant for thin open arrow markers.

ARROW_OVAL

Constant for oval arrow markers.

ARROW_DIAMOND

Constant for diamond arrow markers.

ARROW_DIAMOND_THIN

Constant for thin diamond arrow markers.

ALIGN_LEFT

Constant for left horizontal alignment. Default is left.

ALIGN_CENTER

Constant for center horizontal alignment. Default is center.

ALIGN_RIGHT

Constant for right horizontal alignment. Default is right.

ALIGN_TOP

Constant for top vertical alignment. Default is top.

ALIGN_MIDDLE

Constant for middle vertical alignment. Default is middle.

ALIGN_BOTTOM

Constant for bottom vertical alignment. Default is bottom.

DIRECTION_NORTH

Constant for direction north. Default is north.

DIRECTION_SOUTH

Constant for direction south. Default is south.

DIRECTION_EAST

Constant for direction east. Default is east.

DIRECTION_WEST

Constant for direction west. Default is west.

TEXT_DIRECTION_DEFAULT

Constant for text direction default. Default is an empty string. Use this value to use the default text direction of the operating system.

TEXT_DIRECTION_AUTO

Constant for text direction automatic. Default is auto. Use this value to find the direction for a given text with mxText.getAutoDirection.

TEXT_DIRECTION_LTR

Constant for text direction left to right. Default is ltr. Use this value for left to right text direction.

TEXT_DIRECTION_RTL

Constant for text direction right to left. Default is rtl. Use this value for right to left text direction.

DIRECTION_MASK_NONE

Constant for no direction.

DIRECTION_MASK_WEST

Bitwise mask for west direction.

DIRECTION_MASK_NORTH

Bitwise mask for north direction.

DIRECTION_MASK_SOUTH

Bitwise mask for south direction.

DIRECTION_MASK_EAST

Bitwise mask for east direction.

DIRECTION_MASK_ALL

Bitwise mask for all directions.

ELBOW_VERTICAL

Constant for elbow vertical. Default is horizontal.

ELBOW_HORIZONTAL

Constant for elbow horizontal. Default is horizontal.

EDGESTYLE_ELBOW

Name of the elbow edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_ENTITY_RELATION

Name of the entity relation edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_LOOP

Name of the loop edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_SIDETOSIDE

Name of the side to side edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_TOPTOBOTTOM

Name of the top to bottom edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_ORTHOGONAL

Name of the generic orthogonal edge style. Can be used as a string value for the STYLE_EDGE style.

EDGESTYLE_SEGMENT

Name of the generic segment edge style. Can be used as a string value for the STYLE_EDGE style.

PERIMETER_ELLIPSE

Name of the ellipse perimeter. Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_RECTANGLE

Name of the rectangle perimeter. Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_RHOMBUS

Name of the rhombus perimeter. Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_HEXAGON

Name of the hexagon perimeter. Can be used as a string value for the STYLE_PERIMETER style.

PERIMETER_TRIANGLE

PERIMETER_TRIANGLE: 'trianglePerimeter' }

Name of the triangle perimeter. Can be used as a string value for the STYLE_PERIMETER style.

mxEventObject

The mxEventObject is a wrapper for all properties of a single event. Additionally, it also offers functions to consume the event and check if it was consumed as follows:

evt.consume();
INV: evt.isConsumed() == true

Summary

Functions
mxEventObject	Constructs a new event object with the specified name.
Variables
name	Holds the name.
properties	Holds the properties as an associative array.
consumed	Holds the consumed state.
Functions
getName	Returns name.
getProperties	Returns properties.
getProperty	Returns the property for the given key.
isConsumed	Returns true if the event has been consumed.
consume	Consumes the event.

Functions

mxEventObject

function mxEventObject( name )

Constructs a new event object with the specified name. An optional sequence of key, value pairs can be appended to define properties.

Example

new mxEventObject("eventName", key1, val1, .., keyN, valN)

Variables

name

mxEventObject.prototype.name

Holds the name.

properties

mxEventObject.prototype.properties

Holds the properties as an associative array.

consumed

mxEventObject.prototype.consumed

Holds the consumed state. Default is false.

Functions

getName

mxEventObject.prototype.getName = function()

Returns name.

getProperties

mxEventObject.prototype.getProperties = function()

Returns properties.

getProperty

mxEventObject.prototype.getProperty = function( key )

Returns the property for the given key.

isConsumed

mxEventObject.prototype.isConsumed = function()

Returns true if the event has been consumed.

consume

mxEventObject.prototype.consume = function()

Consumes the event.

mxMouseEvent

Base class for all mouse events in mxGraph. A listener for this event should implement the following methods:

graph.addMouseListener(
{
  mouseDown: function(sender, evt)
  {
    mxLog.debug('mouseDown');
  },
  mouseMove: function(sender, evt)
  {
    mxLog.debug('mouseMove');
  },
  mouseUp: function(sender, evt)
  {
    mxLog.debug('mouseUp');
  }
});

Summary

Functions
mxMouseEvent	Constructs a new event object for the given arguments.
Variables
consumed	Holds the consumed state of this event.
evt	Holds the inner event object.
graphX	Holds the x-coordinate of the event in the graph.
graphY	Holds the y-coordinate of the event in the graph.
state	Holds the optional mxCellState associated with this event.
sourceState	Holds the mxCellState that was passed to the constructor.
Functions
getEvent	Returns evt.
getSource	Returns the target DOM element using mxEvent.getSource for evt.
isSource	Returns true if the given mxShape is the source of evt.
getX	Returns <evt.clientX>.
getY	Returns <evt.clientY>.
getGraphX	Returns graphX.
getGraphY	Returns graphY.
getState	Returns state.
getCell	Returns the mxCell in state is not null.
isPopupTrigger	Returns true if the event is a popup trigger.
isConsumed	Returns consumed.
consume	Sets consumed to true and invokes preventDefault on the native event if such a method is defined.

Functions

mxMouseEvent

function mxMouseEvent( evt,
state )

Constructs a new event object for the given arguments.

Parameters

evt	Native mouse event.
state	Optional mxCellState under the mouse.

Variables

consumed

mxMouseEvent.prototype.consumed

Holds the consumed state of this event.

evt

mxMouseEvent.prototype.evt

Holds the inner event object.

graphX

mxMouseEvent.prototype.graphX

Holds the x-coordinate of the event in the graph. This value is set in mxGraph.fireMouseEvent.

graphY

mxMouseEvent.prototype.graphY

Holds the y-coordinate of the event in the graph. This value is set in mxGraph.fireMouseEvent.

state

mxMouseEvent.prototype.state

Holds the optional mxCellState associated with this event.

sourceState

mxMouseEvent.prototype.sourceState

Holds the mxCellState that was passed to the constructor. This can be different from state depending on the result of mxGraph.getEventState.

Functions

getEvent

mxMouseEvent.prototype.getEvent = function()

Returns evt.

getSource

mxMouseEvent.prototype.getSource = function()

Returns the target DOM element using mxEvent.getSource for evt.

isSource

mxMouseEvent.prototype.isSource = function( shape )

Returns true if the given mxShape is the source of evt.

getX

mxMouseEvent.prototype.getX = function()

Returns <evt.clientX>.

getY

mxMouseEvent.prototype.getY = function()

Returns <evt.clientY>.

getGraphX

mxMouseEvent.prototype.getGraphX = function()

Returns graphX.

getGraphY

mxMouseEvent.prototype.getGraphY = function()

Returns graphY.

getState

mxMouseEvent.prototype.getState = function()

Returns state.

getCell

mxMouseEvent.prototype.getCell = function()

Returns the mxCell in state is not null.

isPopupTrigger

mxMouseEvent.prototype.isPopupTrigger = function()

Returns true if the event is a popup trigger.

isConsumed

mxMouseEvent.prototype.isConsumed = function()

Returns consumed.

consume

mxMouseEvent.prototype.consume = function( preventDefault )

Sets consumed to true and invokes preventDefault on the native event if such a method is defined. This is used mainly to avoid the cursor from being changed to a text cursor in Webkit. You can use the preventDefault flag to disable this functionality.

Parameters

preventDefault

Specifies if the native event should be canceled. Default is true.

mxEventSource

Base class for objects that dispatch named events. To create a subclass that inherits from mxEventSource, the following code is used.

function MyClass() { };

MyClass.prototype = new mxEventSource();
MyClass.prototype.constructor = MyClass;

Known Subclasses

mxGraphModel, mxGraph, mxGraphView, mxEditor, mxCellOverlay, mxToolbar, mxWindow

Summary

Functions
mxEventSource	Constructs a new event source.
Variables
eventListeners	Holds the event names and associated listeners in an array.
eventsEnabled	Specifies if events can be fired.
eventSource	Optional source for events.
Functions
isEventsEnabled	Returns eventsEnabled.
setEventsEnabled	Sets eventsEnabled.
getEventSource	Returns eventSource.
setEventSource	Sets eventSource.
addListener	Binds the specified function to the given event name.
removeListener	Removes all occurrences of the given listener from eventListeners.
fireEvent	Dispatches the given event to the listeners which are registered for the event.

Functions

mxEventSource

function mxEventSource( eventSource )

Constructs a new event source.

Variables

eventListeners

mxEventSource.prototype.eventListeners

Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

mxEventSource.prototype.eventsEnabled

Specifies if events can be fired. Default is true.

eventSource

mxEventSource.prototype.eventSource

Optional source for events. Default is null.

Functions

isEventsEnabled

mxEventSource.prototype.isEventsEnabled = function()

Returns eventsEnabled.

setEventsEnabled

mxEventSource.prototype.setEventsEnabled = function( value )

Sets eventsEnabled.

getEventSource

mxEventSource.prototype.getEventSource = function()

Returns eventSource.

setEventSource

mxEventSource.prototype.setEventSource = function( value )

Sets eventSource.

addListener

mxEventSource.prototype.addListener = function( name,
funct )

Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.

The parameters of the listener are the sender and an mxEventObject.

removeListener

mxEventSource.prototype.removeListener = function( funct )

Removes all occurrences of the given listener from eventListeners.

fireEvent

mxEventSource.prototype.fireEvent = function( evt,
sender )

Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope (“this”) is used for the listener invocation (see mxUtils.bind).

Example

fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))

Parameters

evt	mxEventObject that represents the event.
sender	Optional sender to be passed to the listener. Default value is the return value of getEventSource.

mxEvent

Cross-browser DOM event support. For internal event handling, mxEventSource and the graph event dispatch loop in mxGraph are used.

Memory Leaks

Use this class for adding and removing listeners to/from DOM nodes. The removeAllListeners function is provided to remove all listeners that have been added using addListener. The function should be invoked when the last reference is removed in the JavaScript code, typically when the referenced DOM node is removed from the DOM.

Summary

Functions
addListener	Binds the function to the specified event on the given element.
removeListener	Removes the specified listener from the given element.
removeAllListeners	Removes all listeners from the given element.
addGestureListeners	Adds the given listeners for touch, mouse and/or pointer events.
removeGestureListeners	Removes the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.
redirectMouseEvents	Redirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments.
release	Removes the known listeners from the given DOM node and its descendants.
disableContextMenu	Disables the context menu for the given element.
getSource	Returns the event’s target or srcElement depending on the browser.
isConsumed	Returns true if the event has been consumed using consume.
isTouchEvent	Returns true if the event was generated using a touch device (not a pen or mouse).
isPenEvent	Returns true if the event was generated using a pen (not a touch device or mouse).
isMultiTouchEvent	Returns true if the event was generated using a touch device (not a pen or mouse).
isMouseEvent	Returns true if the event was generated using a mouse (not a pen or touch device).
isLeftMouseButton	Returns true if the left mouse button is pressed for the given event.
isMiddleMouseButton	Returns true if the middle mouse button is pressed for the given event.
isRightMouseButton	Returns true if the right mouse button was pressed.
isPopupTrigger	Returns true if the event is a popup trigger.
isShiftDown	Returns true if the shift key is pressed for the given event.
isAltDown	Returns true if the alt key is pressed for the given event.
isControlDown	Returns true if the control key is pressed for the given event.
isMetaDown	Returns true if the meta key is pressed for the given event.
getMainEvent	Returns the touch or mouse event that contains the mouse coordinates.
getClientX	Returns true if the meta key is pressed for the given event.
getClientY	Returns true if the meta key is pressed for the given event.
consume	Consumes the given event.
Variables
LABEL_HANDLE	Index for the label handle in an mxMouseEvent.
ROTATION_HANDLE	Index for the rotation handle in an mxMouseEvent.
CUSTOM_HANDLE	Start index for the custom handles in an mxMouseEvent.
VIRTUAL_HANDLE	Start index for the virtual handles in an mxMouseEvent.
MOUSE_DOWN	Specifies the event name for mouseDown.
MOUSE_MOVE	Specifies the event name for mouseMove.
MOUSE_UP	Specifies the event name for mouseUp.
ACTIVATE	Specifies the event name for activate.
RESIZE_START	Specifies the event name for resizeStart.
RESIZE	Specifies the event name for resize.
RESIZE_END	Specifies the event name for resizeEnd.
MOVE_START	Specifies the event name for moveStart.
MOVE	Specifies the event name for move.
MOVE_END	Specifies the event name for moveEnd.
PAN_START	Specifies the event name for panStart.
PAN	Specifies the event name for pan.
PAN_END	Specifies the event name for panEnd.
MINIMIZE	Specifies the event name for minimize.
NORMALIZE	Specifies the event name for normalize.
MAXIMIZE	Specifies the event name for maximize.
HIDE	Specifies the event name for hide.
SHOW	Specifies the event name for show.
CLOSE	Specifies the event name for close.
DESTROY	Specifies the event name for destroy.
REFRESH	Specifies the event name for refresh.
SIZE	Specifies the event name for size.
SELECT	Specifies the event name for select.
FIRED	Specifies the event name for fired.
FIRE_MOUSE_EVENT	Specifies the event name for fireMouseEvent.
GESTURE	Specifies the event name for gesture.
TAP_AND_HOLD	Specifies the event name for tapAndHold.
GET	Specifies the event name for get.
RECEIVE	Specifies the event name for receive.
CONNECT	Specifies the event name for connect.
DISCONNECT	Specifies the event name for disconnect.
SUSPEND	Specifies the event name for suspend.
RESUME	Specifies the event name for suspend.
MARK	Specifies the event name for mark.
ROOT	Specifies the event name for root.
POST	Specifies the event name for post.
OPEN	Specifies the event name for open.
SAVE	Specifies the event name for open.
BEFORE_ADD_VERTEX	Specifies the event name for beforeAddVertex.
ADD_VERTEX	Specifies the event name for addVertex.
AFTER_ADD_VERTEX	Specifies the event name for afterAddVertex.
DONE	Specifies the event name for done.
EXECUTE	Specifies the event name for execute.
EXECUTED	Specifies the event name for executed.
BEGIN_UPDATE	Specifies the event name for beginUpdate.
START_EDIT	Specifies the event name for startEdit.
END_UPDATE	Specifies the event name for endUpdate.
END_EDIT	Specifies the event name for endEdit.
BEFORE_UNDO	Specifies the event name for beforeUndo.
UNDO	Specifies the event name for undo.
REDO	Specifies the event name for redo.
CHANGE	Specifies the event name for change.
NOTIFY	Specifies the event name for notify.
LAYOUT_CELLS	Specifies the event name for layoutCells.
CLICK	Specifies the event name for click.
SCALE	Specifies the event name for scale.
TRANSLATE	Specifies the event name for translate.
SCALE_AND_TRANSLATE	Specifies the event name for scaleAndTranslate.
UP	Specifies the event name for up.
DOWN	Specifies the event name for down.
ADD	Specifies the event name for add.
REMOVE	Specifies the event name for remove.
CLEAR	Specifies the event name for clear.
ADD_CELLS	Specifies the event name for addCells.
CELLS_ADDED	Specifies the event name for cellsAdded.
MOVE_CELLS	Specifies the event name for moveCells.
CELLS_MOVED	Specifies the event name for cellsMoved.
RESIZE_CELLS	Specifies the event name for resizeCells.
CELLS_RESIZED	Specifies the event name for cellsResized.
TOGGLE_CELLS	Specifies the event name for toggleCells.
CELLS_TOGGLED	Specifies the event name for cellsToggled.
ORDER_CELLS	Specifies the event name for orderCells.
CELLS_ORDERED	Specifies the event name for cellsOrdered.
REMOVE_CELLS	Specifies the event name for removeCells.
CELLS_REMOVED	Specifies the event name for cellsRemoved.
GROUP_CELLS	Specifies the event name for groupCells.
UNGROUP_CELLS	Specifies the event name for ungroupCells.
REMOVE_CELLS_FROM_PARENT	Specifies the event name for removeCellsFromParent.
FOLD_CELLS	Specifies the event name for foldCells.
CELLS_FOLDED	Specifies the event name for cellsFolded.
ALIGN_CELLS	Specifies the event name for alignCells.
LABEL_CHANGED	Specifies the event name for labelChanged.
CONNECT_CELL	Specifies the event name for connectCell.
CELL_CONNECTED	Specifies the event name for cellConnected.
SPLIT_EDGE	Specifies the event name for splitEdge.
FLIP_EDGE	Specifies the event name for flipEdge.
START_EDITING	Specifies the event name for startEditing.
EDITING_STARTED	Specifies the event name for editingStarted.
EDITING_STOPPED	Specifies the event name for editingStopped.
ADD_OVERLAY	Specifies the event name for addOverlay.
REMOVE_OVERLAY	Specifies the event name for removeOverlay.
UPDATE_CELL_SIZE	Specifies the event name for updateCellSize.
ESCAPE	Specifies the event name for escape.
DOUBLE_CLICK	Specifies the event name for doubleClick.
START	Specifies the event name for start.
RESET	Specifies the event name for reset.

Functions

addListener

addListener: function()

Binds the function to the specified event on the given element. Use mxUtils.bind in order to bind the “this” keyword inside the function to a given execution scope.

removeListener

removeListener: function()

Removes the specified listener from the given element.

removeAllListeners

removeAllListeners: function( element )

Removes all listeners from the given element.

addGestureListeners

addGestureListeners: function( node,
startListener,
moveListener,
endListener )

Adds the given listeners for touch, mouse and/or pointer events. If mxClient.IS_POINTER is true then pointer events will be registered, else the respective mouse events will be registered. If mxClient.IS_POINTER is false and mxClient.IS_TOUCH is true then the respective touch events will be registered as well as the mouse events.

removeGestureListeners

removeGestureListeners: function( node,
startListener,
moveListener,
endListener )

Removes the given listeners from mousedown, mousemove, mouseup and the respective touch events if mxClient.IS_TOUCH is true.

redirectMouseEvents

redirectMouseEvents: function( node,
graph,
state,
down,
move,
up,
dblClick )

Redirects the mouse events from the given DOM node to the graph dispatch loop using the event and given state as event arguments. State can either be an instance of mxCellState or a function that returns an mxCellState. The down, move, up and dblClick arguments are optional functions that take the trigger event as arguments and replace the default behaviour.

release

release: function( element )

Removes the known listeners from the given DOM node and its descendants.

Parameters

element

DOM node to remove the listeners from.

disableContextMenu

disableContextMenu: function( element )

Disables the context menu for the given element.

getSource

getSource: function( evt )

Returns the event’s target or srcElement depending on the browser.

isConsumed

isConsumed: function( evt )

Returns true if the event has been consumed using consume.

isTouchEvent

isTouchEvent: function( evt )

Returns true if the event was generated using a touch device (not a pen or mouse).

isPenEvent

isPenEvent: function( evt )

Returns true if the event was generated using a pen (not a touch device or mouse).

isMultiTouchEvent

isMultiTouchEvent: function( evt )

Returns true if the event was generated using a touch device (not a pen or mouse).

isMouseEvent

isMouseEvent: function( evt )

Returns true if the event was generated using a mouse (not a pen or touch device).

isLeftMouseButton

isLeftMouseButton: function( evt )

Returns true if the left mouse button is pressed for the given event. To check if a button is pressed during a mouseMove you should use the mxGraph.isMouseDown property. Note that this returns true in Firefox for control+left-click on the Mac.

isMiddleMouseButton

isMiddleMouseButton: function( evt )

Returns true if the middle mouse button is pressed for the given event. To check if a button is pressed during a mouseMove you should use the mxGraph.isMouseDown property.

isRightMouseButton

isRightMouseButton: function( evt )

Returns true if the right mouse button was pressed. Note that this button might not be available on some systems. For handling a popup trigger isPopupTrigger should be used.

isPopupTrigger

isPopupTrigger: function( evt )

Returns true if the event is a popup trigger. This implementation returns true if the right button or the left button and control was pressed on a Mac.

isShiftDown

isShiftDown: function( evt )

Returns true if the shift key is pressed for the given event.

isAltDown

isAltDown: function( evt )

Returns true if the alt key is pressed for the given event.

isControlDown

isControlDown: function( evt )

Returns true if the control key is pressed for the given event.

isMetaDown

isMetaDown: function( evt )

Returns true if the meta key is pressed for the given event.

getMainEvent

getMainEvent: function( e )

Returns the touch or mouse event that contains the mouse coordinates.

getClientX

getClientX: function( e )

Returns true if the meta key is pressed for the given event.

getClientY

getClientY: function( e )

Returns true if the meta key is pressed for the given event.

consume

consume: function( evt,
preventDefault,
stopPropagation )

Consumes the given event.

Parameters

evt	Native event to be consumed.
preventDefault	Optional boolean to prevent the default for the event. Default is true.
stopPropagation	Option boolean to stop event propagation. Default is true.

Variables

LABEL_HANDLE

Index for the label handle in an mxMouseEvent. This should be a negative value that does not interfere with any possible handle indices. Default is -1.

ROTATION_HANDLE

Index for the rotation handle in an mxMouseEvent. This should be a negative value that does not interfere with any possible handle indices. Default is -2.

CUSTOM_HANDLE

Start index for the custom handles in an mxMouseEvent. This should be a negative value and is the start index which is decremented for each custom handle. Default is -100.

VIRTUAL_HANDLE

Start index for the virtual handles in an mxMouseEvent. This should be a negative value and is the start index which is decremented for each virtual handle. Default is -100000. This assumes that there are no more than VIRTUAL_HANDLE - CUSTOM_HANDLE custom handles.

MOUSE_DOWN

Specifies the event name for mouseDown.

MOUSE_MOVE

Specifies the event name for mouseMove.

MOUSE_UP

Specifies the event name for mouseUp.

ACTIVATE

Specifies the event name for activate.

RESIZE_START

Specifies the event name for resizeStart.

RESIZE

Specifies the event name for resize.

RESIZE_END

Specifies the event name for resizeEnd.

MOVE_START

Specifies the event name for moveStart.

MOVE

Specifies the event name for move.

MOVE_END

Specifies the event name for moveEnd.

PAN_START

Specifies the event name for panStart.

PAN

Specifies the event name for pan.

PAN_END

Specifies the event name for panEnd.

MINIMIZE

Specifies the event name for minimize.

NORMALIZE

Specifies the event name for normalize.

MAXIMIZE

Specifies the event name for maximize.

HIDE

Specifies the event name for hide.

SHOW

Specifies the event name for show.

CLOSE

Specifies the event name for close.

DESTROY

Specifies the event name for destroy.

REFRESH

Specifies the event name for refresh.

SIZE

Specifies the event name for size.

SELECT

Specifies the event name for select.

FIRED

Specifies the event name for fired.

FIRE_MOUSE_EVENT

Specifies the event name for fireMouseEvent.

GESTURE

Specifies the event name for gesture.

TAP_AND_HOLD

Specifies the event name for tapAndHold.

GET

Specifies the event name for get.

RECEIVE

Specifies the event name for receive.

CONNECT

Specifies the event name for connect.

DISCONNECT

Specifies the event name for disconnect.

SUSPEND

Specifies the event name for suspend.

RESUME

Specifies the event name for suspend.

MARK

Specifies the event name for mark.

ROOT

Specifies the event name for root.

POST

Specifies the event name for post.

OPEN

Specifies the event name for open.

SAVE

Specifies the event name for open.

BEFORE_ADD_VERTEX

Specifies the event name for beforeAddVertex.

ADD_VERTEX

Specifies the event name for addVertex.

AFTER_ADD_VERTEX

Specifies the event name for afterAddVertex.

DONE

Specifies the event name for done.

EXECUTE

Specifies the event name for execute.

EXECUTED

Specifies the event name for executed.

BEGIN_UPDATE

Specifies the event name for beginUpdate.

START_EDIT

Specifies the event name for startEdit.

END_UPDATE

Specifies the event name for endUpdate.

END_EDIT

Specifies the event name for endEdit.

BEFORE_UNDO

Specifies the event name for beforeUndo.

UNDO

Specifies the event name for undo.

REDO

Specifies the event name for redo.

CHANGE

Specifies the event name for change.

NOTIFY

Specifies the event name for notify.

LAYOUT_CELLS

Specifies the event name for layoutCells.

CLICK

Specifies the event name for click.

SCALE

Specifies the event name for scale.

TRANSLATE

Specifies the event name for translate.

SCALE_AND_TRANSLATE

Specifies the event name for scaleAndTranslate.

UP

Specifies the event name for up.

DOWN

Specifies the event name for down.

ADD

Specifies the event name for add.

REMOVE

Specifies the event name for remove.

CLEAR

Specifies the event name for clear.

ADD_CELLS

Specifies the event name for addCells.

CELLS_ADDED

Specifies the event name for cellsAdded.

MOVE_CELLS

Specifies the event name for moveCells.

CELLS_MOVED

Specifies the event name for cellsMoved.

RESIZE_CELLS

Specifies the event name for resizeCells.

CELLS_RESIZED

Specifies the event name for cellsResized.

TOGGLE_CELLS

Specifies the event name for toggleCells.

CELLS_TOGGLED

Specifies the event name for cellsToggled.

ORDER_CELLS

Specifies the event name for orderCells.

CELLS_ORDERED

Specifies the event name for cellsOrdered.

REMOVE_CELLS

Specifies the event name for removeCells.

CELLS_REMOVED

Specifies the event name for cellsRemoved.

GROUP_CELLS

Specifies the event name for groupCells.

UNGROUP_CELLS

Specifies the event name for ungroupCells.

REMOVE_CELLS_FROM_PARENT

Specifies the event name for removeCellsFromParent.

FOLD_CELLS

Specifies the event name for foldCells.

CELLS_FOLDED

Specifies the event name for cellsFolded.

ALIGN_CELLS

Specifies the event name for alignCells.

LABEL_CHANGED

Specifies the event name for labelChanged.

CONNECT_CELL

Specifies the event name for connectCell.

CELL_CONNECTED

Specifies the event name for cellConnected.

SPLIT_EDGE

Specifies the event name for splitEdge.

FLIP_EDGE

Specifies the event name for flipEdge.

START_EDITING

Specifies the event name for startEditing.

EDITING_STARTED

Specifies the event name for editingStarted.

EDITING_STOPPED

Specifies the event name for editingStopped.

ADD_OVERLAY

Specifies the event name for addOverlay.

REMOVE_OVERLAY

Specifies the event name for removeOverlay.

UPDATE_CELL_SIZE

Specifies the event name for updateCellSize.

ESCAPE

Specifies the event name for escape.

DOUBLE_CLICK

Specifies the event name for doubleClick.

START

Specifies the event name for start.

RESET

RESET: 'reset' }

Specifies the event name for reset.

mxXmlRequest

XML HTTP request wrapper. See also: mxUtils.get, mxUtils.post and mxUtils.load. This class provides a cross-browser abstraction for Ajax requests.

Encoding

For encoding parameter values, the built-in encodeURIComponent JavaScript method must be used. For automatic encoding of post data in mxEditor the mxEditor.escapePostData switch can be set to true (default). The encoding will be carried out using the conte type of the page. That is, the page containting the editor should contain a meta tag in the header, eg. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

Example

var onload = function(req)
{
  mxUtils.alert(req.getDocumentElement());
}

var onerror = function(req)
{
  mxUtils.alert('Error');
}
new mxXmlRequest(url, 'key=value').send(onload, onerror);

Sends an asynchronous POST request to the specified URL.

Example

var req = new mxXmlRequest(url, 'key=value', 'POST', false);
req.send();
mxUtils.alert(req.getDocumentElement());

Sends a synchronous POST request to the specified URL.

Example

var encoder = new mxCodec();
var result = encoder.encode(graph.getModel());
var xml = encodeURIComponent(mxUtils.getXml(result));
new mxXmlRequest(url, 'xml='+xml).send();

Sends an encoded graph model to the specified URL using xml as the parameter name. The parameter can then be retrieved in C# as follows:

string xml = HttpUtility.UrlDecode(context.Request.Params["xml"]);

Or in Java as follows

String xml = URLDecoder.decode(request.getParameter("xml"), "UTF-8").replace("\n", "&#xa;");

Note that the linefeeds should only be replaced if the XML is processed in Java, for example when creating an image.

Summary

Functions
mxXmlRequest	Constructs an XML HTTP request.
Variables
url	Holds the target URL of the request.
params	Holds the form encoded data for the POST request.
method	Specifies the request method.
async	Boolean indicating if the request is asynchronous.
binary	Boolean indicating if the request is binary.
withCredentials	Specifies if withCredentials should be used in HTML5-compliant browsers.
username	Specifies the username to be used for authentication.
password	Specifies the password to be used for authentication.
request	Holds the inner, browser-specific request object.
decodeSimulateValues	Specifies if request values should be decoded as URIs before setting the textarea value in simulate.
Functions
isBinary	Returns binary.
setBinary	Sets binary.
getText	Returns the response as a string.
isReady	Returns true if the response is ready.
getDocumentElement	Returns the document element of the response XML document.
getXml	Returns the response as an XML document.
getText	Returns the response as a string.
getStatus	Returns the status as a number, eg.
create	Creates and returns the inner request object.
send	Send the request to the target URL using the specified functions to process the response asychronously.
setRequestHeaders	Sets the headers for the given request and parameters.
simulate	Creates and posts a request to the given target URL using a dynamically created form inside the given document.

Functions

mxXmlRequest

function mxXmlRequest( url,
params,
method,
async,
username,
password )

Constructs an XML HTTP request.

Parameters

url	Target URL of the request.
params	Form encoded parameters to send with a POST request.
method	String that specifies the request method. Possible values are POST and GET. Default is POST.
async	Boolean specifying if an asynchronous request should be used. Default is true.
username	String specifying the username to be used for the request.
password	String specifying the password to be used for the request.

Variables

url

mxXmlRequest.prototype.url

Holds the target URL of the request.

params

mxXmlRequest.prototype.params

Holds the form encoded data for the POST request.

method

mxXmlRequest.prototype.method

Specifies the request method. Possible values are POST and GET. Default is POST.

async

mxXmlRequest.prototype.async

Boolean indicating if the request is asynchronous.

binary

mxXmlRequest.prototype.binary

Boolean indicating if the request is binary. This option is ignored in IE. In all other browsers the requested mime type is set to text/plain; charset=x-user-defined. Default is false.

withCredentials

mxXmlRequest.prototype.withCredentials

Specifies if withCredentials should be used in HTML5-compliant browsers. Default is false.

username

mxXmlRequest.prototype.username

Specifies the username to be used for authentication.

password

mxXmlRequest.prototype.password

Specifies the password to be used for authentication.

request

mxXmlRequest.prototype.request

Holds the inner, browser-specific request object.

decodeSimulateValues

mxXmlRequest.prototype.decodeSimulateValues

Specifies if request values should be decoded as URIs before setting the textarea value in simulate. Defaults to false for backwards compatibility, to avoid another decode on the server this should be set to true.

Functions

isBinary

mxXmlRequest.prototype.isBinary = function()

Returns binary.

setBinary

mxXmlRequest.prototype.setBinary = function( value )

Sets binary.

getText

mxXmlRequest.prototype.getText = function()

Returns the response as a string.

isReady

mxXmlRequest.prototype.isReady = function()

Returns true if the response is ready.

getDocumentElement

mxXmlRequest.prototype.getDocumentElement = function()

Returns the document element of the response XML document.

getXml

mxXmlRequest.prototype.getXml = function()

Returns the response as an XML document. Use getDocumentElement to get the document element of the XML document.

getText

mxXmlRequest.prototype.getText = function()

Returns the response as a string.

getStatus

mxXmlRequest.prototype.getStatus = function()

Returns the status as a number, eg. 404 for “Not found” or 200 for “OK”. Note: The NS_ERROR_NOT_AVAILABLE for invalid responses cannot be cought.

create

mxXmlRequest.prototype.create = function()

Creates and returns the inner request object.

send

mxXmlRequest.prototype.send = function( onload,
onerror,
timeout,
ontimeout )

Send the request to the target URL using the specified functions to process the response asychronously.

Note: Due to technical limitations, onerror is currently ignored.

Parameters

onload	Function to be invoked if a successful response was received.
onerror	Function to be called on any error.
timeout	Optional timeout in ms before calling ontimeout.
ontimeout	Optional function to execute on timeout.

setRequestHeaders

mxXmlRequest.prototype.setRequestHeaders = function( request,
params )

Sets the headers for the given request and parameters. This sets the content-type to application/x-www-form-urlencoded if any params exist.

Example

request.setRequestHeaders = function(request, params)
{
  if (params != null)
  {
    request.setRequestHeader('Content-Type',
            'multipart/form-data');
    request.setRequestHeader('Content-Length',
            params.length);
  }
};

Use the code above before calling send if you require a multipart/form-data request.

simulate

mxXmlRequest.prototype.simulate = function( doc,
target )

Creates and posts a request to the given target URL using a dynamically created form inside the given document.

Parameters

docs	Document that contains the form element.
target	Target to send the form result to.

mxClipboard

Singleton that implements a clipboard for graph cells.

Example

mxClipboard.copy(graph);
mxClipboard.paste(graph2);

This copies the selection cells from the graph to the clipboard and pastes them into graph2.

For fine-grained control of the clipboard data the mxGraph.canExportCell and mxGraph.canImportCell functions can be overridden.

To restore previous parents for pasted cells, the implementation for copy and paste can be changed as follows.

mxClipboard.copy = function(graph, cells)
{
  cells = cells || graph.getSelectionCells();
  var result = graph.getExportableCells(cells);

  mxClipboard.parents = new Object();

  for (var i = 0; i < result.length; i++)
  {
    mxClipboard.parents[i] = graph.model.getParent(cells[i]);
  }

  mxClipboard.insertCount = 1;
  mxClipboard.setCells(graph.cloneCells(result));

  return result;
};

mxClipboard.paste = function(graph)
{
  if (!mxClipboard.isEmpty())
  {
    var cells = graph.getImportableCells(mxClipboard.getCells());
    var delta = mxClipboard.insertCount * mxClipboard.STEPSIZE;
    var parent = graph.getDefaultParent();

    graph.model.beginUpdate();
    try
    {
      for (var i = 0; i < cells.length; i++)
      {
        var tmp = (mxClipboard.parents != null && graph.model.contains(mxClipboard.parents[i])) ?
             mxClipboard.parents[i] : parent;
        cells[i] = graph.importCells([cells[i]], delta, delta, tmp)[0];
      }
    }
    finally
    {
      graph.model.endUpdate();
    }

    // Increments the counter and selects the inserted cells
    mxClipboard.insertCount++;
    graph.setSelectionCells(cells);
  }
};

Summary

Variables
STEPSIZE	Defines the step size to offset the cells after each paste operation.
insertCount	Counts the number of times the clipboard data has been inserted.
cells	Holds the array of mxCells currently in the clipboard.
Functions
setCells	Sets the cells in the clipboard.
getCells	Returns the cells in the clipboard.
isEmpty	Returns true if the clipboard currently has not data stored.
cut	Cuts the given array of mxCells from the specified graph.
removeCells	Hook to remove the given cells from the given graph after a cut operation.
copy	Copies the given array of mxCells from the specified graph to cells.
paste	Pastes the cells into the specified graph restoring the relation to <parents>, if possible.

Variables

STEPSIZE

Defines the step size to offset the cells after each paste operation. Default is 10.

insertCount

Counts the number of times the clipboard data has been inserted.

cells

Holds the array of mxCells currently in the clipboard.

Functions

setCells

setCells: function( cells )

Sets the cells in the clipboard. Fires a mxEvent.CHANGE event.

getCells

getCells: function()

Returns the cells in the clipboard.

isEmpty

isEmpty: function()

Returns true if the clipboard currently has not data stored.

cut

cut: function( graph,
cells )

Cuts the given array of mxCells from the specified graph. If cells is null then the selection cells of the graph will be used. Returns the cells that have been cut from the graph.

Parameters

graph	mxGraph that contains the cells to be cut.
cells	Optional array of mxCells to be cut.

removeCells

removeCells: function( graph,
cells )

Hook to remove the given cells from the given graph after a cut operation.

Parameters

graph	mxGraph that contains the cells to be cut.
cells	Array of mxCells to be cut.

copy

copy: function( graph,
cells )

Copies the given array of mxCells from the specified graph to cells. Returns the original array of cells that has been cloned. Descendants of cells in the array are ignored.

Parameters

graph	mxGraph that contains the cells to be copied.
cells	Optional array of mxCells to be copied.

paste

paste: function( graph )

Pastes the cells into the specified graph restoring the relation to <parents>, if possible. If the parents are no longer in the graph or invisible then the cells are added to the graph’s default or into the swimlane under the cell’s new location if one exists. The cells are added to the graph using mxGraph.importCells and returned.

Parameters

graph

mxGraph to paste the cells into.

mxWindow

Basic window inside a document.

Examples

Creating a simple window.

var tb = document.createElement('div');
var wnd = new mxWindow('Title', tb, 100, 100, 200, 200, true, true);
wnd.setVisible(true);

Creating a window that contains an iframe.

var frame = document.createElement('iframe');
frame.setAttribute('width', '192px');
frame.setAttribute('height', '172px');
frame.setAttribute('src', 'http://www.example.com/');
frame.style.backgroundColor = 'white';

var w = document.body.clientWidth;
var h = (document.body.clientHeight || document.documentElement.clientHeight);
var wnd = new mxWindow('Title', frame, (w-200)/2, (h-200)/3, 200, 200);
wnd.setVisible(true);

To limit the movement of a window, eg. to keep it from being moved beyond the top, left corner the following method can be overridden (recommended):

wnd.setLocation = function(x, y)
{
  x = Math.max(0, x);
  y = Math.max(0, y);
  mxWindow.prototype.setLocation.apply(this, arguments);
};

Or the following event handler can be used

wnd.addListener(mxEvent.MOVE, function(e)
{
  wnd.setLocation(Math.max(0, wnd.getX()), Math.max(0, wnd.getY()));
});

To keep a window inside the current window

mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
{
  var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  var x = this.window.getX();
  var y = this.window.getY();

  if (x + this.window.table.clientWidth > iw)
  {
    x = Math.max(0, iw - this.window.table.clientWidth);
  }

  if (y + this.window.table.clientHeight > ih)
  {
    y = Math.max(0, ih - this.window.table.clientHeight);
  }

  if (this.window.getX() != x || this.window.getY() != y)
  {
    this.window.setLocation(x, y);
  }
}));

Summary

Events
mxEvent.MOVE_START	Fires before the window is moved.
mxEvent.MOVE	Fires while the window is being moved.
mxEvent.MOVE_END	Fires after the window is moved.
mxEvent.RESIZE_START	Fires before the window is resized.
mxEvent.RESIZE	Fires while the window is being resized.
mxEvent.RESIZE_END	Fires after the window is resized.
mxEvent.MAXIMIZE	Fires after the window is maximized.
mxEvent.MINIMIZE	Fires after the window is minimized.
mxEvent.NORMALIZE	Fires after the window is normalized, that is, it returned from maximized or minimized state.
mxEvent.ACTIVATE	Fires after a window is activated.
mxEvent.SHOW	Fires after the window is shown.
mxEvent.HIDE	Fires after the window is hidden.
mxEvent.CLOSE	Fires before the window is closed.
mxEvent.DESTROY	Fires before the window is destroyed.
Functions
mxWindow	Constructs a new window with the given dimension and title to display the specified content.
Variables
closeImage	URL of the image to be used for the close icon in the titlebar.
minimizeImage	URL of the image to be used for the minimize icon in the titlebar.
normalizeImage	URL of the image to be used for the normalize icon in the titlebar.
maximizeImage	URL of the image to be used for the maximize icon in the titlebar.
normalizeImage	URL of the image to be used for the resize icon.
visible	Boolean flag that represents the visible state of the window.
minimumSize	mxRectangle that specifies the minimum width and height of the window.
destroyOnClose	Specifies if the window should be destroyed when it is closed.
contentHeightCorrection	Defines the correction factor for computing the height of the contentWrapper.
title	Reference to the DOM node (TD) that contains the title.
content	Reference to the DOM node that represents the window content.
Functions
init	Initializes the DOM tree that represents the window.
setTitle	Sets the window title to the given string.
setScrollable	Sets if the window contents should be scrollable.
activate	Puts the window on top of all other windows.
getElement	Returuns the outermost DOM node that makes up the window.
fit	Makes sure the window is inside the client area of the window.
isResizable	Returns true if the window is resizable.
setResizable	Sets if the window should be resizable.
setSize	Sets the size of the window.
setMinimizable	Sets if the window is minimizable.
getMinimumSize	Returns an mxRectangle that specifies the size for the minimized window.
installMinimizeHandler	Installs the event listeners required for minimizing the window.
setMaximizable	Sets if the window is maximizable.
installMaximizeHandler	Installs the event listeners required for maximizing the window.
installMoveHandler	Installs the event listeners required for moving the window.
setLocation	Sets the upper, left corner of the window.
getX	Returns the current position on the x-axis.
getY	Returns the current position on the y-axis.
installCloseHandler	Adds the closeImage as a new image node in <closeImg> and installs the <close> event.
setImage	Sets the image associated with the window.
setClosable	Sets the image associated with the window.
isVisible	Returns true if the window is visible.
setVisible	Shows or hides the window depending on the given flag.
show	Shows the window.
hide	Hides the window.
destroy	Destroys the window and removes all associated resources.

Events

mxEvent.MOVE_START

Fires before the window is moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE

Fires while the window is being moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MOVE_END

Fires after the window is moved. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_START

Fires before the window is resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE

Fires while the window is being resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.RESIZE_END

Fires after the window is resized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MAXIMIZE

Fires after the window is maximized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.MINIMIZE

Fires after the window is minimized. The <code>event</code> property contains the corresponding mouse event.

mxEvent.NORMALIZE

Fires after the window is normalized, that is, it returned from maximized or minimized state. The <code>event</code> property contains the corresponding mouse event.

mxEvent.ACTIVATE

Fires after a window is activated. The <code>previousWindow</code> property contains the previous window. The event sender is the active window.

mxEvent.SHOW

Fires after the window is shown. This event has no properties.

mxEvent.HIDE

Fires after the window is hidden. This event has no properties.

mxEvent.CLOSE

Fires before the window is closed. The <code>event</code> property contains the corresponding mouse event.

mxEvent.DESTROY

Fires before the window is destroyed. This event has no properties.

Functions

mxWindow

function mxWindow( title,
content,
x,
y,
width,
height,
minimizable,
movable,
replaceNode,
style )

Constructs a new window with the given dimension and title to display the specified content. The window elements use the given style as a prefix for the classnames of the respective window elements, namely, the window title and window pane. The respective postfixes are appended to the given stylename as follows:

style	Base style for the window.
style+Title	Style for the window title.
style+Pane	Style for the window pane.

The default value for style is mxWindow, resulting in the following classnames for the window elements: mxWindow, mxWindowTitle and mxWindowPane.

If replaceNode is given then the window replaces the given DOM node in the document.

Parameters

title	String that represents the title of the new window.
content	DOM node that is used as the window content.
x	X-coordinate of the window location.
y	Y-coordinate of the window location.
width	Width of the window.
height	Optional height of the window. Default is to match the height of the content at the specified width.
minimizable	Optional boolean indicating if the window is minimizable. Default is true.
movable	Optional boolean indicating if the window is movable. Default is true.
replaceNode	Optional DOM node that the window should replace.
style	Optional base classname for the window elements. Default is mxWindow.

Variables

closeImage

mxWindow.prototype.closeImage

URL of the image to be used for the close icon in the titlebar.

minimizeImage

mxWindow.prototype.minimizeImage

URL of the image to be used for the minimize icon in the titlebar.

normalizeImage

mxWindow.prototype.normalizeImage

URL of the image to be used for the normalize icon in the titlebar.

maximizeImage

mxWindow.prototype.maximizeImage

URL of the image to be used for the maximize icon in the titlebar.

normalizeImage

URL of the image to be used for the resize icon.

visible

mxWindow.prototype.visible

Boolean flag that represents the visible state of the window.

minimumSize

mxWindow.prototype.minimumSize

mxRectangle that specifies the minimum width and height of the window. Default is (50, 40).

destroyOnClose

mxWindow.prototype.destroyOnClose

Specifies if the window should be destroyed when it is closed. If this is false then the window is hidden using setVisible. Default is true.

contentHeightCorrection

mxWindow.prototype.contentHeightCorrection

Defines the correction factor for computing the height of the contentWrapper. Default is 6 for IE 7/8 standards mode and 2 for all other browsers and modes.

title

mxWindow.prototype.title

Reference to the DOM node (TD) that contains the title.

content

mxWindow.prototype.content

Reference to the DOM node that represents the window content.

Functions

init

mxWindow.prototype.init = function( x,
y,
width,
height,
style )

Initializes the DOM tree that represents the window.

setTitle

mxWindow.prototype.setTitle = function( title )

Sets the window title to the given string. HTML markup inside the title will be escaped.

setScrollable

mxWindow.prototype.setScrollable = function( scrollable )

Sets if the window contents should be scrollable.

activate

mxWindow.prototype.activate = function()

Puts the window on top of all other windows.

getElement

mxWindow.prototype.getElement = function()

Returuns the outermost DOM node that makes up the window.

fit

mxWindow.prototype.fit = function()

Makes sure the window is inside the client area of the window.

isResizable

mxWindow.prototype.isResizable = function()

Returns true if the window is resizable.

setResizable

mxWindow.prototype.setResizable = function( resizable )

Sets if the window should be resizable. To avoid interference with some built-in features of IE10 and later, the use of the following code is recommended if there are resizable mxWindows in the page:

if (mxClient.IS_POINTER)
{
  document.body.style.msTouchAction = 'none';
}

setSize

mxWindow.prototype.setSize = function( width,
height )

Sets the size of the window.

setMinimizable

mxWindow.prototype.setMinimizable = function( minimizable )

Sets if the window is minimizable.

getMinimumSize

mxWindow.prototype.getMinimumSize = function()

Returns an mxRectangle that specifies the size for the minimized window. A width or height of 0 means keep the existing width or height. This implementation returns the height of the window title and keeps the width.

installMinimizeHandler

mxWindow.prototype.installMinimizeHandler = function()

Installs the event listeners required for minimizing the window.

setMaximizable

mxWindow.prototype.setMaximizable = function( maximizable )

Sets if the window is maximizable.

installMaximizeHandler

mxWindow.prototype.installMaximizeHandler = function()

Installs the event listeners required for maximizing the window.

installMoveHandler

mxWindow.prototype.installMoveHandler = function()

Installs the event listeners required for moving the window.

setLocation

mxWindow.prototype.setLocation = function( x,
y )

Sets the upper, left corner of the window.

getX

mxWindow.prototype.getX = function()

Returns the current position on the x-axis.

getY

mxWindow.prototype.getY = function()

Returns the current position on the y-axis.

installCloseHandler

mxWindow.prototype.installCloseHandler = function()

Adds the closeImage as a new image node in <closeImg> and installs the <close> event.

setImage

mxWindow.prototype.setImage = function( image )

Sets the image associated with the window.

Parameters

image

URL of the image to be used.

setClosable

mxWindow.prototype.setClosable = function( closable )

Sets the image associated with the window.

Parameters

closable

Boolean specifying if the window should be closable.

isVisible

mxWindow.prototype.isVisible = function()

Returns true if the window is visible.

setVisible

mxWindow.prototype.setVisible = function( visible )

Shows or hides the window depending on the given flag.

Parameters

visible

Boolean indicating if the window should be made visible.

show

mxWindow.prototype.show = function()

Shows the window.

hide

mxWindow.prototype.hide = function()

Hides the window.

destroy

mxWindow.prototype.destroy = function()

Destroys the window and removes all associated resources. Fires a destroy event prior to destroying the window.

mxForm

A simple class for creating HTML forms.

Summary

Functions
mxForm	Creates a HTML table using the specified classname.
Variables
table	Holds the DOM node that represents the table.
body	Holds the DOM node that represents the tbody (table body).
Functions
getTable	Returns the table that contains this form.
addButtons	Helper method to add an OK and Cancel button using the respective functions.
addText	Adds an input for the given name, type and value and returns it.
addCheckbox	Adds a checkbox for the given name and value and returns the textfield.
addTextarea	Adds a textarea for the given name and value and returns the textarea.
addCombo	Adds a combo for the given name and returns the combo.
addOption	Adds an option for the given label to the specified combo.
addField	Adds a new row with the name and the input field in two columns and returns the given input.

Functions

mxForm

function mxForm( className )

Creates a HTML table using the specified classname.

Variables

table

mxForm.prototype.table

Holds the DOM node that represents the table.

body

mxForm.prototype.body

Holds the DOM node that represents the tbody (table body). New rows can be added to this object using DOM API.

Functions

getTable

mxForm.prototype.getTable = function()

Returns the table that contains this form.

addButtons

mxForm.prototype.addButtons = function( okFunct,
cancelFunct )

Helper method to add an OK and Cancel button using the respective functions.

addText

mxForm.prototype.addText = function( name,
value,
type )

Adds an input for the given name, type and value and returns it.

addCheckbox

mxForm.prototype.addCheckbox = function( name,
value )

Adds a checkbox for the given name and value and returns the textfield.

addTextarea

mxForm.prototype.addTextarea = function( name,
value,
rows )

Adds a textarea for the given name and value and returns the textarea.

addCombo

mxForm.prototype.addCombo = function( name,
isMultiSelect,
size )

Adds a combo for the given name and returns the combo.

addOption

mxForm.prototype.addOption = function( combo,
label,
value,
isSelected )

Adds an option for the given label to the specified combo.

addField

mxForm.prototype.addField = function( name,
input )

Adds a new row with the name and the input field in two columns and returns the given input.

mxImage

Encapsulates the URL, width and height of an image.

Summary

Functions
mxImage	Constructs a new image.
Variables
src	String that specifies the URL of the image.
width	Integer that specifies the width of the image.
height	Integer that specifies the height of the image.

Functions

mxImage

function mxImage( src,
width,
height )

Constructs a new image.

Variables

src

mxImage.prototype.src

String that specifies the URL of the image.

width

mxImage.prototype.width

Integer that specifies the width of the image.

height

mxImage.prototype.height

Integer that specifies the height of the image.

mxDivResizer

Maintains the size of a div element in Internet Explorer. This is a workaround for the right and bottom style being ignored in IE.

If you need a div to cover the scrollwidth and -height of a document, then you can use this class as follows:

var resizer = new mxDivResizer(background);
resizer.getDocumentHeight = function()
{
  return document.body.scrollHeight;
}
resizer.getDocumentWidth = function()
{
  return document.body.scrollWidth;
}
resizer.resize();

Summary

Functions
mxDivResizer	Constructs an object that maintains the size of a div element when the window is being resized.
resizeWidth	Boolean specifying if the width should be updated.
resizeHeight	Boolean specifying if the height should be updated.
handlingResize	Boolean specifying if the width should be updated.
resize	Updates the style of the DIV after the window has been resized.
getDocumentWidth	Hook for subclassers to return the width of the document (without scrollbars).
getDocumentHeight	Hook for subclassers to return the height of the document (without scrollbars).

Functions

mxDivResizer

function mxDivResizer( div,
container )

Constructs an object that maintains the size of a div element when the window is being resized. This is only required for Internet Explorer as it ignores the respective stylesheet information for DIV elements.

Parameters

div	Reference to the DOM node whose size should be maintained.
container	Optional Container that contains the div. Default is the window.

resizeWidth

Boolean specifying if the width should be updated.

resizeHeight

Boolean specifying if the height should be updated.

handlingResize

Boolean specifying if the width should be updated.

resize

mxDivResizer.prototype.resize = function()

Updates the style of the DIV after the window has been resized.

getDocumentWidth

mxDivResizer.prototype.getDocumentWidth = function()

Hook for subclassers to return the width of the document (without scrollbars).

getDocumentHeight

mxDivResizer.prototype.getDocumentHeight = function()

Hook for subclassers to return the height of the document (without scrollbars).

mxDragSource

Wrapper to create a drag source from a DOM element so that the element can be dragged over a graph and dropped into the graph as a new cell.

Problem is that in the dropHandler the current preview location is not available, so the preview and the dropHandler must match.

Summary

Functions
mxDragSource	Constructs a new drag source for the given element.
Variables
element	Reference to the DOM node which was made draggable.
dropHandler	Holds the DOM node that is used to represent the drag preview.
dragOffset	mxPoint that specifies the offset of the dragElement.
dragElement	Holds the DOM node that is used to represent the drag preview.
previewElement	Optional mxRectangle that specifies the unscaled size of the preview.
enabled	Specifies if this drag source is enabled.
currentGraph	Reference to the mxGraph that is the current drop target.
currentDropTarget	Holds the current drop target under the mouse.
currentPoint	Holds the current drop location.
currentGuide	Holds an mxGuide for the currentGraph if <dragPreview> is not null.
currentGuide	Holds an mxGuide for the currentGraph if <dragPreview> is not null.
autoscroll	Specifies if the graph should scroll automatically.
guidesEnabled	Specifies if mxGuide should be enabled.
gridEnabled	Specifies if the grid should be allowed.
highlightDropTargets	Specifies if drop targets should be highlighted.
dragElementZIndex	ZIndex for the drag element.
dragElementOpacity	Opacity of the drag element in %.
checkEventSource	Whether the event source should be checked in <graphContainerEvent>.
Functions
isEnabled	Returns enabled.
setEnabled	Sets enabled.
isGuidesEnabled	Returns guidesEnabled.
setGuidesEnabled	Sets guidesEnabled.
isGridEnabled	Returns gridEnabled.
setGridEnabled	Sets gridEnabled.
getGraphForEvent	Returns the graph for the given mouse event.
getDropTarget	Returns the drop target for the given graph and coordinates.
createDragElement	Creates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.
createPreviewElement	Creates and returns an element which can be used as a preview in the given graph.
isActive	Returns true if this drag source is active.
reset	Stops and removes everything and restores the state of the object.
mouseDown	Returns the drop target for the given graph and coordinates.
startDrag	Creates the dragElement using createDragElement.
stopDrag	Invokes removeDragElement.
removeDragElement	Removes and destroys the dragElement.
getElementForEvent	Returns the topmost element under the given event.
graphContainsEvent	Returns true if the given graph contains the given event.
mouseMove	Gets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.
mouseUp	Processes the mouse up event and invokes drop, dragExit and stopDrag as required.
removeListeners	Actives the given graph as a drop target.
dragEnter	Actives the given graph as a drop target.
dragExit	Deactivates the given graph as a drop target.
dragOver	Implements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.
drop	Returns the drop target for the given graph and coordinates.

Functions

mxDragSource

function mxDragSource( element,
dropHandler )

Constructs a new drag source for the given element.

Variables

element

mxDragSource.prototype.element

Reference to the DOM node which was made draggable.

dropHandler

mxDragSource.prototype.dropHandler

Holds the DOM node that is used to represent the drag preview. If this is null then the source element will be cloned and used for the drag preview.

dragOffset

mxDragSource.prototype.dragOffset

mxPoint that specifies the offset of the dragElement. Default is null.

dragElement

mxDragSource.prototype.dragElement

Holds the DOM node that is used to represent the drag preview. If this is null then the source element will be cloned and used for the drag preview.

previewElement

mxDragSource.prototype.previewElement

Optional mxRectangle that specifies the unscaled size of the preview.

enabled

mxDragSource.prototype.enabled

Specifies if this drag source is enabled. Default is true.

currentGraph

mxDragSource.prototype.currentGraph

Reference to the mxGraph that is the current drop target.

currentDropTarget

mxDragSource.prototype.currentDropTarget

Holds the current drop target under the mouse.

currentPoint

mxDragSource.prototype.currentPoint

Holds the current drop location.

currentGuide

mxDragSource.prototype.currentGuide

Holds an mxGuide for the currentGraph if <dragPreview> is not null.

currentGuide

Holds an mxGuide for the currentGraph if <dragPreview> is not null.

autoscroll

mxDragSource.prototype.autoscroll

Specifies if the graph should scroll automatically. Default is true.

guidesEnabled

mxDragSource.prototype.guidesEnabled

Specifies if mxGuide should be enabled. Default is true.

gridEnabled

mxDragSource.prototype.gridEnabled

Specifies if the grid should be allowed. Default is true.

highlightDropTargets

mxDragSource.prototype.highlightDropTargets

Specifies if drop targets should be highlighted. Default is true.

dragElementZIndex

mxDragSource.prototype.dragElementZIndex

ZIndex for the drag element. Default is 100.

dragElementOpacity

mxDragSource.prototype.dragElementOpacity

Opacity of the drag element in %. Default is 70.

checkEventSource

mxDragSource.prototype.checkEventSource

Whether the event source should be checked in <graphContainerEvent>. Default is true.

Functions

isEnabled

mxDragSource.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxDragSource.prototype.setEnabled = function( value )

Sets enabled.

isGuidesEnabled

mxDragSource.prototype.isGuidesEnabled = function()

Returns guidesEnabled.

setGuidesEnabled

mxDragSource.prototype.setGuidesEnabled = function( value )

Sets guidesEnabled.

isGridEnabled

mxDragSource.prototype.isGridEnabled = function()

Returns gridEnabled.

setGridEnabled

mxDragSource.prototype.setGridEnabled = function( value )

Sets gridEnabled.

getGraphForEvent

mxDragSource.prototype.getGraphForEvent = function( evt )

Returns the graph for the given mouse event. This implementation returns null.

getDropTarget

mxDragSource.prototype.getDropTarget = function( graph,
x,
y,
evt )

Returns the drop target for the given graph and coordinates. This implementation uses mxGraph.getCellAt.

createDragElement

mxDragSource.prototype.createDragElement = function( evt )

Creates and returns a clone of the <dragElementPrototype> or the element if the former is not defined.

createPreviewElement

mxDragSource.prototype.createPreviewElement = function( graph )

Creates and returns an element which can be used as a preview in the given graph.

isActive

mxDragSource.prototype.isActive = function()

Returns true if this drag source is active.

reset

mxDragSource.prototype.reset = function()

Stops and removes everything and restores the state of the object.

mouseDown

mxDragSource.prototype.mouseDown = function( evt )

Returns the drop target for the given graph and coordinates. This implementation uses mxGraph.getCellAt.

To ignore popup menu events for a drag source, this function can be overridden as follows.

var mouseDown = dragSource.mouseDown;

dragSource.mouseDown = function(evt)
{
  if (!mxEvent.isPopupTrigger(evt))
  {
    mouseDown.apply(this, arguments);
  }
};

startDrag

mxDragSource.prototype.startDrag = function( evt )

Creates the dragElement using createDragElement.

stopDrag

mxDragSource.prototype.stopDrag = function()

Invokes removeDragElement.

removeDragElement

mxDragSource.prototype.removeDragElement = function()

Removes and destroys the dragElement.

getElementForEvent

mxDragSource.prototype.getElementForEvent = function( evt )

Returns the topmost element under the given event.

graphContainsEvent

mxDragSource.prototype.graphContainsEvent = function( graph,
evt )

Returns true if the given graph contains the given event.

mouseMove

mxDragSource.prototype.mouseMove = function( evt )

Gets the graph for the given event using getGraphForEvent, updates the currentGraph, calling dragEnter and dragExit on the new and old graph, respectively, and invokes dragOver if currentGraph is not null.

mouseUp

mxDragSource.prototype.mouseUp = function( evt )

Processes the mouse up event and invokes drop, dragExit and stopDrag as required.

removeListeners

mxDragSource.prototype.removeListeners = function()

Actives the given graph as a drop target.

dragEnter

mxDragSource.prototype.dragEnter = function( graph,
evt )

Actives the given graph as a drop target.

dragExit

mxDragSource.prototype.dragExit = function( graph,
evt )

Deactivates the given graph as a drop target.

dragOver

mxDragSource.prototype.dragOver = function( graph,
evt )

Implements autoscroll, updates the currentPoint, highlights any drop targets and updates the preview.

drop

mxDragSource.prototype.drop = function( graph,
evt,
dropTarget,
x,
y )

Returns the drop target for the given graph and coordinates. This implementation uses mxGraph.getCellAt.

mxToolbar

Creates a toolbar inside a given DOM node. The toolbar may contain icons, buttons and combo boxes.

Summary

Events
mxEvent.SELECT	Fires when an item was selected in the toolbar.
Functions
mxToolbar	Constructs a toolbar in the specified container.
Variables
container	Reference to the DOM nodes that contains the toolbar.
enabled	Specifies if events are handled.
noReset	Specifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar.
updateDefaultMode	Boolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode.
Functions
addItem	Adds the given function as an image with the specified title and icon and returns the new image node.
addCombo	Adds and returns a new SELECT element using the given style.
addCombo	Adds and returns a new SELECT element using the given title as the default element.
addOption	Adds and returns a new OPTION element inside the given SELECT element.
addSwitchMode	Adds a new selectable item to the toolbar.
addMode	Adds a new item to the toolbar.
selectMode	Resets the state of the previously selected mode and displays the given DOM node as selected.
resetMode	Selects the default mode and resets the state of the previously selected mode.
addSeparator	Adds the specifies image as a separator.
addBreak	Adds a break to the container.
addLine	Adds a horizontal line to the container.
destroy	Removes the toolbar and all its associated resources.

Events

mxEvent.SELECT

Fires when an item was selected in the toolbar. The <code>function</code> property contains the function that was selected in selectMode.

Functions

mxToolbar

function mxToolbar( container )

Constructs a toolbar in the specified container.

Parameters

container

DOM node that contains the toolbar.

Variables

container

mxToolbar.prototype.container

Reference to the DOM nodes that contains the toolbar.

enabled

mxToolbar.prototype.enabled

Specifies if events are handled. Default is true.

noReset

mxToolbar.prototype.noReset

Specifies if resetMode requires a forced flag of true for resetting the current mode in the toolbar. Default is false. This is set to true if the toolbar item is double clicked to avoid a reset after a single use of the item.

updateDefaultMode

mxToolbar.prototype.updateDefaultMode

Boolean indicating if the default mode should be the last selected switch mode or the first inserted switch mode. Default is true, that is the last selected switch mode is the default mode. The default mode is the mode to be selected after a reset of the toolbar. If this is false, then the default mode is the first inserted mode item regardless of what was last selected. Otherwise, the selected item after a reset is the previously selected item.

Functions

addItem

mxToolbar.prototype.addItem = function( title,
icon,
funct,
pressedIcon,
style,
factoryMethod )

Adds the given function as an image with the specified title and icon and returns the new image node.

Parameters

title	Optional string that is used as the tooltip.
icon	Optional URL of the image to be used. If no URL is given, then a button is created.
funct	Function to execute on a mouse click.
pressedIcon	Optional URL of the pressed image. Default is a gray background.
style	Optional style classname. Default is mxToolbarItem.
factoryMethod	Optional factory method for popup menu, eg. function(menu, evt, cell) { menu.addItem(‘Hello, World!’); }

addCombo

mxToolbar.prototype.addCombo = function( style )

Adds and returns a new SELECT element using the given style. The element is placed inside a DIV with the mxToolbarComboContainer style classname.

Parameters

style

Optional style classname. Default is mxToolbarCombo.

addCombo

Adds and returns a new SELECT element using the given title as the default element. The selection is reset to this element after each change.

Parameters

title	String that specifies the title of the default element.
style	Optional style classname. Default is mxToolbarCombo.

addOption

mxToolbar.prototype.addOption = function( combo,
title,
value )

Adds and returns a new OPTION element inside the given SELECT element. If the given value is a function then it is stored in the option’s funct field.

Parameters

combo	SELECT element that will contain the new entry.
title	String that specifies the title of the option.
value	Specifies the value associated with this option.

addSwitchMode

mxToolbar.prototype.addSwitchMode = function( title,
icon,
funct,
pressedIcon,
style )

Adds a new selectable item to the toolbar. Only one switch mode item may be selected at a time. The currently selected item is the default item after a reset of the toolbar.

addMode

mxToolbar.prototype.addMode = function( title,
icon,
funct,
pressedIcon,
style,
toggle )

Adds a new item to the toolbar. The selection is typically reset after the item has been consumed, for example by adding a new vertex to the graph. The reset is not carried out if the item is double clicked.

The function argument uses the following signature: funct(evt, cell) where evt is the native mouse event and cell is the cell under the mouse.

selectMode

mxToolbar.prototype.selectMode = function( domNode,
funct )

Resets the state of the previously selected mode and displays the given DOM node as selected. This function fires a select event with the given function as a parameter.

resetMode

mxToolbar.prototype.resetMode = function( forced )

Selects the default mode and resets the state of the previously selected mode.

addSeparator

mxToolbar.prototype.addSeparator = function( icon )

Adds the specifies image as a separator.

Parameters

icon	URL of the separator icon.

addBreak

mxToolbar.prototype.addBreak = function()

Adds a break to the container.

addLine

mxToolbar.prototype.addLine = function()

Adds a horizontal line to the container.

destroy

mxToolbar.prototype.destroy = function ()

Removes the toolbar and all its associated resources.

mxUndoableEdit

Implements a composite undoable edit. Here is an example for a custom change which gets executed via the model:

function CustomChange(model, name)
{
  this.model = model;
  this.name = name;
  this.previous = name;
};

CustomChange.prototype.execute = function()
{
  var tmp = this.model.name;
  this.model.name = this.previous;
  this.previous = tmp;
};

var name = prompt('Enter name');
graph.model.execute(new CustomChange(graph.model, name));

Summary

Events
mxEvent.EXECUTED	Fires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.START_EDIT	Fires before a set of changes will be executed in undo or redo.
mxEvent.END_EDIT	Fires after a set of changeswas executed in undo or redo.
Functions
mxUndoableEdit	Constructs a new undoable edit for the given source.
Variables
source	Specifies the source of the edit.
changes	Array that contains the changes that make up this edit.
significant	Specifies if the undoable change is significant.
undone	Specifies if this edit has been undone.
redone	Specifies if this edit has been redone.
Functions
isEmpty	Returns true if the this edit contains no changes.
isSignificant	Returns significant.
add	Adds the specified change to this edit.
notify	Hook to notify any listeners of the changes after an undo or redo has been carried out.
die	Hook to free resources after the edit has been removed from the command history.
undo	Undoes all changes in this edit.
redo	Redoes all changes in this edit.

Events

mxEvent.EXECUTED

Fires between START_EDIT and END_EDIT after an atomic change was executed. The <code>change</code> property contains the change that was executed.

mxEvent.START_EDIT

Fires before a set of changes will be executed in undo or redo. This event contains no properties.

mxEvent.END_EDIT

Fires after a set of changeswas executed in undo or redo. This event contains no properties.

Functions

mxUndoableEdit

function mxUndoableEdit( source,
significant )

Constructs a new undoable edit for the given source.

Variables

source

mxUndoableEdit.prototype.source

Specifies the source of the edit.

changes

mxUndoableEdit.prototype.changes

Array that contains the changes that make up this edit. The changes are expected to either have an undo and redo function, or an execute function. Default is an empty array.

significant

mxUndoableEdit.prototype.significant

Specifies if the undoable change is significant. Default is true.

undone

mxUndoableEdit.prototype.undone

Specifies if this edit has been undone. Default is false.

redone

mxUndoableEdit.prototype.redone

Specifies if this edit has been redone. Default is false.

Functions

isEmpty

mxUndoableEdit.prototype.isEmpty = function()

Returns true if the this edit contains no changes.

isSignificant

mxUndoableEdit.prototype.isSignificant = function()

Returns significant.

add

mxUndoableEdit.prototype.add = function( change )

Adds the specified change to this edit. The change is an object that is expected to either have an undo and redo, or an execute function.

notify

mxUndoableEdit.prototype.notify = function()

Hook to notify any listeners of the changes after an undo or redo has been carried out. This implementation is empty.

die

mxUndoableEdit.prototype.die = function()

Hook to free resources after the edit has been removed from the command history. This implementation is empty.

undo

mxUndoableEdit.prototype.undo = function()

Undoes all changes in this edit.

redo

mxUndoableEdit.prototype.redo = function()

Redoes all changes in this edit.

mxUndoManager

Implements a command history. When changing the graph model, an <mxUndoableChange> object is created at the start of the transaction (when model.beginUpdate is called). All atomic changes are then added to this object until the last model.endUpdate call, at which point the mxUndoableEdit is dispatched in an event, and added to the history inside mxUndoManager. This is done by an event listener in mxEditor.installUndoHandler.

Each atomic change of the model is represented by an object (eg. mxRootChange, mxChildChange, mxTerminalChange etc) which contains the complete undo information. The mxUndoManager also listens to the mxGraphView and stores it’s changes to the current root as insignificant undoable changes, so that drilling (step into, step up) is undone.

This means when you execute an atomic change on the model, then change the current root on the view and click undo, the change of the root will be undone together with the change of the model so that the display represents the state at which the model was changed. However, these changes are not transmitted for sharing as they do not represent a state change.

Example

When adding an undo manager to a graph, make sure to add it to the model and the view as well to maintain a consistent display across multiple undo/redo steps.

var undoManager = new mxUndoManager();
var listener = function(sender, evt)
{
  undoManager.undoableEditHappened(evt.getProperty('edit'));
};
graph.getModel().addListener(mxEvent.UNDO, listener);
graph.getView().addListener(mxEvent.UNDO, listener);

The code creates a function that informs the undoManager of an undoable edit and binds it to the undo event of mxGraphModel and mxGraphView using mxEventSource.addListener.

Summary

Events
mxEvent.CLEAR	Fires after clear was invoked.
mxEvent.UNDO	Fires afer a significant edit was undone in undo.
mxEvent.REDO	Fires afer a significant edit was redone in redo.
mxEvent.ADD	Fires after an undoable edit was added to the history.
Functions
mxUndoManager	Constructs a new undo manager with the given history size.
Variables
size	Maximum command history size.
history	Array that contains the steps of the command history.
indexOfNextAdd	Index of the element to be added next.
Functions
isEmpty	Returns true if the history is empty.
clear	Clears the command history.
canUndo	Returns true if an undo is possible.
undo	Undoes the last change.
canRedo	Returns true if a redo is possible.
redo	Redoes the last change.
undoableEditHappened	Method to be called to add new undoable edits to the history.
trim	Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit.

Events

mxEvent.CLEAR

Fires after clear was invoked. This event has no properties.

mxEvent.UNDO

Fires afer a significant edit was undone in undo. The <code>edit</code> property contains the mxUndoableEdit that was undone.

mxEvent.REDO

Fires afer a significant edit was redone in redo. The <code>edit</code> property contains the mxUndoableEdit that was redone.

mxEvent.ADD

Fires after an undoable edit was added to the history. The <code>edit</code> property contains the mxUndoableEdit that was added.

Functions

mxUndoManager

function mxUndoManager( size )

Constructs a new undo manager with the given history size. If no history size is given, then a default size of 100 steps is used.

Variables

size

mxUndoManager.prototype.size

Maximum command history size. 0 means unlimited history. Default is 100.

history

mxUndoManager.prototype.history

Array that contains the steps of the command history.

indexOfNextAdd

mxUndoManager.prototype.indexOfNextAdd

Index of the element to be added next.

Functions

isEmpty

mxUndoManager.prototype.isEmpty = function()

Returns true if the history is empty.

clear

mxUndoManager.prototype.clear = function()

Clears the command history.

canUndo

mxUndoManager.prototype.canUndo = function()

Returns true if an undo is possible.

undo

mxUndoManager.prototype.undo = function()

Undoes the last change.

canRedo

mxUndoManager.prototype.canRedo = function()

Returns true if a redo is possible.

redo

mxUndoManager.prototype.redo = function()

Redoes the last change.

undoableEditHappened

mxUndoManager.prototype.undoableEditHappened = function( undoableEdit )

Method to be called to add new undoable edits to the history.

trim

mxUndoManager.prototype.trim = function()

Removes all pending steps after indexOfNextAdd from the history, invoking die on each edit. This is called from undoableEditHappened.

mxUrlConverter

Converts relative and absolute URLs to absolute URLs with protocol and domain.

Summary

Variables
enabled	Specifies if the converter is enabled.
baseUrl	Specifies the base URL to be used as a prefix for relative URLs.
baseDomain	Specifies the base domain to be used as a prefix for absolute URLs.
Functions
updateBaseUrl	Private helper function to update the base URL.
isEnabled	Returns enabled.
setEnabled	Sets enabled.
getBaseUrl	Returns baseUrl.
setBaseUrl	Sets baseUrl.
getBaseDomain	Returns baseDomain.
setBaseDomain	Sets baseDomain.
isRelativeUrl	Returns true if the given URL is relative.
convert	Converts the given URL to an absolute URL with protol and domain.

Variables

enabled

mxUrlConverter.prototype.enabled

Specifies if the converter is enabled. Default is true.

baseUrl

mxUrlConverter.prototype.baseUrl

Specifies the base URL to be used as a prefix for relative URLs.

baseDomain

mxUrlConverter.prototype.baseDomain

Specifies the base domain to be used as a prefix for absolute URLs.

Functions

updateBaseUrl

mxUrlConverter.prototype.updateBaseUrl = function()

Private helper function to update the base URL.

isEnabled

mxUrlConverter.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxUrlConverter.prototype.setEnabled = function( value )

Sets enabled.

getBaseUrl

mxUrlConverter.prototype.getBaseUrl = function()

Returns baseUrl.

setBaseUrl

mxUrlConverter.prototype.setBaseUrl = function( value )

Sets baseUrl.

getBaseDomain

mxUrlConverter.prototype.getBaseDomain = function()

Returns baseDomain.

setBaseDomain

mxUrlConverter.prototype.setBaseDomain = function( value )

Sets baseDomain.

isRelativeUrl

mxUrlConverter.prototype.isRelativeUrl = function( url )

Returns true if the given URL is relative.

convert

mxUrlConverter.prototype.convert = function( url )

Converts the given URL to an absolute URL with protol and domain. Relative URLs are first converted to absolute URLs.

mxPanningManager

Implements a handler for panning.

Summary

Variables
damper	Damper value for the panning.
delay	Delay in milliseconds for the panning.
handleMouseOut	Specifies if mouse events outside of the component should be handled.
border	Border to handle automatic panning inside the component.

Variables

damper

mxPanningManager.prototype.damper

Damper value for the panning. Default is 1/6.

delay

mxPanningManager.prototype.delay

Delay in milliseconds for the panning. Default is 10.

handleMouseOut

mxPanningManager.prototype.handleMouseOut

Specifies if mouse events outside of the component should be handled. Default is true.

border

mxPanningManager.prototype.border

Border to handle automatic panning inside the component. Default is 0 (disabled).

mxPopupMenu

Basic popup menu. To add a vertical scrollbar to a given submenu, the following code can be used.

var mxPopupMenuShowMenu = mxPopupMenu.prototype.showMenu;
mxPopupMenu.prototype.showMenu = function()
{
  mxPopupMenuShowMenu.apply(this, arguments);

  this.div.style.overflowY = 'auto';
  this.div.style.overflowX = 'hidden';
  this.div.style.maxHeight = '160px';
};

Summary

Functions
mxPopupMenu	Constructs a popupmenu.
Events
mxEvent.SHOW	Fires after the menu has been shown in popup.
Variables
submenuImage	URL of the image to be used for the submenu icon.
zIndex	Specifies the zIndex for the popupmenu and its shadow.
factoryMethod	Function that is used to create the popup menu.
useLeftButtonForPopup	Specifies if popupmenus should be activated by clicking the left mouse button.
enabled	Specifies if events are handled.
itemCount	Contains the number of times addItem has been called for a new menu.
autoExpand	Specifies if submenus should be expanded on mouseover.
smartSeparators	Specifies if separators should only be added if a menu item follows them.
labels	Specifies if any labels should be visible.
Functions
init	Initializes the shapes required for this vertex handler.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isPopupTrigger	Returns true if the given event is a popupmenu trigger for the optional given cell.
addItem	Adds the given item to the given parent item.
createSubmenu	Creates the nodes required to add submenu items inside the given parent item.
showSubmenu	Shows the submenu inside the given parent row.
addSeparator	Adds a horizontal separator in the given parent item or the top-level menu if no parent is specified.
popup	Shows the popup menu for the given event and cell.
isMenuShowing	Returns true if the menu is showing.
showMenu	Shows the menu.
hideMenu	Removes the menu and all submenus.
hideSubmenu	Removes all submenus inside the given parent.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxPopupMenu

Constructs a popupmenu.

Events

mxEvent.SHOW

Fires after the menu has been shown in popup.

Variables

submenuImage

mxPopupMenu.prototype.submenuImage

URL of the image to be used for the submenu icon.

zIndex

mxPopupMenu.prototype.zIndex

Specifies the zIndex for the popupmenu and its shadow. Default is 1006.

factoryMethod

mxPopupMenu.prototype.factoryMethod

Function that is used to create the popup menu. The function takes the current panning handler, the mxCell under the mouse and the mouse event that triggered the call as arguments.

useLeftButtonForPopup

mxPopupMenu.prototype.useLeftButtonForPopup

Specifies if popupmenus should be activated by clicking the left mouse button. Default is false.

enabled

mxPopupMenu.prototype.enabled

Specifies if events are handled. Default is true.

itemCount

mxPopupMenu.prototype.itemCount

Contains the number of times addItem has been called for a new menu.

autoExpand

mxPopupMenu.prototype.autoExpand

Specifies if submenus should be expanded on mouseover. Default is false.

smartSeparators

mxPopupMenu.prototype.smartSeparators

Specifies if separators should only be added if a menu item follows them. Default is false.

labels

mxPopupMenu.prototype.labels

Specifies if any labels should be visible. Default is true.

Functions

init

mxPopupMenu.prototype.init = function()

Initializes the shapes required for this vertex handler.

isEnabled

mxPopupMenu.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxPopupMenu.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

isPopupTrigger

mxPopupMenu.prototype.isPopupTrigger = function( me )

Returns true if the given event is a popupmenu trigger for the optional given cell.

Parameters

me	mxMouseEvent that represents the mouse event.

addItem

mxPopupMenu.prototype.addItem = function( title,
image,
funct,
parent,
iconCls,
enabled,
active )

Adds the given item to the given parent item. If no parent item is specified then the item is added to the top-level menu. The return value may be used as the parent argument, ie. as a submenu item. The return value is the table row that represents the item.

Paramters

title	String that represents the title of the menu item.
image	Optional URL for the image icon.
funct	Function associated that takes a mouseup or touchend event.
parent	Optional item returned by addItem.
iconCls	Optional string that represents the CSS class for the image icon. IconsCls is ignored if image is given.
enabled	Optional boolean indicating if the item is enabled. Default is true.
active	Optional boolean indicating if the menu should implement any event handling. Default is true.

createSubmenu

mxPopupMenu.prototype.createSubmenu = function( parent )

Creates the nodes required to add submenu items inside the given parent item. This is called in addItem if a parent item is used for the first time. This adds various DOM nodes and a submenuImage to the parent.

Parameters

parent

An item returned by addItem.

showSubmenu

mxPopupMenu.prototype.showSubmenu = function( parent,
row )

Shows the submenu inside the given parent row.

addSeparator

mxPopupMenu.prototype.addSeparator = function( parent,
force )

Adds a horizontal separator in the given parent item or the top-level menu if no parent is specified.

Parameters

parent	Optional item returned by addItem.
force	Optional boolean to ignore smartSeparators. Default is false.

popup

mxPopupMenu.prototype.popup = function( x,
y,
cell,
evt )

Shows the popup menu for the given event and cell.

Example

graph.panningHandler.popup = function(x, y, cell, evt)
{
  mxUtils.alert('Hello, World!');
}

isMenuShowing

mxPopupMenu.prototype.isMenuShowing = function()

Returns true if the menu is showing.

showMenu

mxPopupMenu.prototype.showMenu = function()

Shows the menu.

hideMenu

mxPopupMenu.prototype.hideMenu = function()

Removes the menu and all submenus.

hideSubmenu

mxPopupMenu.prototype.hideSubmenu = function( parent )

Removes all submenus inside the given parent.

Parameters

parent

An item returned by addItem.

destroy

mxPopupMenu.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxAutoSaveManager

Manager for automatically saving diagrams. The save hook must be implemented.

Example

var mgr = new mxAutoSaveManager(editor.graph);
mgr.save = function()
{
  mxLog.show();
  mxLog.debug('save');
};

Summary

Functions
mxAutoSaveManager	Constructs a new automatic layout for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
autoSaveDelay	Minimum amount of seconds between two consecutive autosaves.
autoSaveThrottle	Minimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds.
autoSaveThreshold	Minimum amount of ignored changes before an autosave.
ignoredChanges	Counter for ignored changes in autosave.
lastSnapshot	Used for autosaving.
enabled	Specifies if event handling is enabled.
changeHandler	Holds the function that handles graph model changes.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
setGraph	Sets the graph that the layouts operate on.
save	Empty hook that is called if the graph should be saved.
graphModelChanged	Invoked when the graph model has changed.
reset	Resets all counters.
destroy	Removes all handlers from the graph and deletes the reference to it.

Functions

mxAutoSaveManager

function mxAutoSaveManager( graph )

Constructs a new automatic layout for the given graph.

Arguments

graph

Reference to the enclosing graph.

Variables

graph

mxAutoSaveManager.prototype.graph

Reference to the enclosing mxGraph.

autoSaveDelay

mxAutoSaveManager.prototype.autoSaveDelay

Minimum amount of seconds between two consecutive autosaves. Eg. a value of 1 (s) means the graph is not stored more than once per second. Default is 10.

autoSaveThrottle

mxAutoSaveManager.prototype.autoSaveThrottle

Minimum amount of seconds between two consecutive autosaves triggered by more than <autoSaveThreshhold> changes within a timespan of less than autoSaveDelay seconds. Eg. a value of 1 (s) means the graph is not stored more than once per second even if there are more than autoSaveThreshold changes within that timespan. Default is 2.

autoSaveThreshold

mxAutoSaveManager.prototype.autoSaveThreshold

Minimum amount of ignored changes before an autosave. Eg. a value of 2 means after 2 change of the graph model the autosave will trigger if the condition below is true. Default is 5.

ignoredChanges

mxAutoSaveManager.prototype.ignoredChanges

Counter for ignored changes in autosave.

lastSnapshot

mxAutoSaveManager.prototype.lastSnapshot

Used for autosaving. See <autosave>.

enabled

mxAutoSaveManager.prototype.enabled

Specifies if event handling is enabled. Default is true.

changeHandler

mxAutoSaveManager.prototype.changeHandler

Holds the function that handles graph model changes.

Functions

isEnabled

mxAutoSaveManager.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxAutoSaveManager.prototype.setEnabled = function( value )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

setGraph

mxAutoSaveManager.prototype.setGraph = function( graph )

Sets the graph that the layouts operate on.

save

mxAutoSaveManager.prototype.save = function()

Empty hook that is called if the graph should be saved.

graphModelChanged

mxAutoSaveManager.prototype.graphModelChanged = function( changes )

Invoked when the graph model has changed.

reset

mxAutoSaveManager.prototype.reset = function()

Resets all counters.

destroy

mxAutoSaveManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxAnimation

Implements a basic animation in JavaScript.

Summary

Functions
mxAnimation	Constructs an animation.
Variables
delay	Specifies the delay between the animation steps.
thread	Reference to the thread while the animation is running.
Functions
isRunning	Returns true if the animation is running.
startAnimation	Starts the animation by repeatedly invoking updateAnimation.
updateAnimation	Hook for subclassers to implement the animation.
stopAnimation	Stops the animation by deleting the timer and fires an mxEvent.DONE.

Functions

mxAnimation

function mxAnimation( delay )

Constructs an animation.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

delay

mxAnimation.prototype.delay

Specifies the delay between the animation steps. Defaul is 30ms.

thread

mxAnimation.prototype.thread

Reference to the thread while the animation is running.

Functions

isRunning

mxAnimation.prototype.isRunning = function()

Returns true if the animation is running.

startAnimation

mxAnimation.prototype.startAnimation = function()

Starts the animation by repeatedly invoking updateAnimation.

updateAnimation

mxAnimation.prototype.updateAnimation = function()

Hook for subclassers to implement the animation. Invoke stopAnimation when finished, startAnimation to resume. This is called whenever the timer fires and fires an mxEvent.EXECUTE event with no properties.

stopAnimation

mxAnimation.prototype.stopAnimation = function()

Stops the animation by deleting the timer and fires an mxEvent.DONE.

mxMorphing

Implements animation for morphing cells. Here is an example of using this class for animating the result of a layout algorithm:

graph.getModel().beginUpdate();
try
{
  var circleLayout = new mxCircleLayout(graph);
  circleLayout.execute(graph.getDefaultParent());
}
finally
{
  var morph = new mxMorphing(graph);
  morph.addListener(mxEvent.DONE, function()
  {
    graph.getModel().endUpdate();
  });

  morph.startAnimation();
}

Summary

Functions
mxMorphing	Constructs an animation.
Variables
graph	Specifies the delay between the animation steps.
steps	Specifies the maximum number of steps for the morphing.
step	Contains the current step.
ease	Ease-off for movement towards the given vector.
cells	Optional array of cells to be animated.
Functions
updateAnimation	Animation step.
show	Shows the changes in the given mxCellStatePreview.
animateCell	Animates the given cell state using mxCellStatePreview.moveState.
stopRecursion	Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.
getDelta	Returns the vector between the current rendered state and the future location of the state after the display will be updated.
getOriginForCell	Returns the top, left corner of the given cell.

Functions

mxMorphing

function mxMorphing( graph,
steps,
ease,
delay )

Constructs an animation.

Parameters

graph	Reference to the enclosing mxGraph.
steps	Optional number of steps in the morphing animation. Default is 6.
ease	Optional easing constant for the animation. Default is 1.5.
delay	Optional delay between the animation steps. Passed to mxAnimation.

Variables

graph

mxMorphing.prototype.graph

Specifies the delay between the animation steps. Defaul is 30ms.

steps

mxMorphing.prototype.steps

Specifies the maximum number of steps for the morphing.

step

mxMorphing.prototype.step

Contains the current step.

ease

mxMorphing.prototype.ease

Ease-off for movement towards the given vector. Larger values are slower and smoother. Default is 4.

cells

mxMorphing.prototype.cells

Optional array of cells to be animated. If this is not specified then all cells are checked and animated if they have been moved in the current transaction.

Functions

updateAnimation

mxMorphing.prototype.updateAnimation = function()

Animation step.

show

mxMorphing.prototype.show = function( move )

Shows the changes in the given mxCellStatePreview.

animateCell

mxMorphing.prototype.animateCell = function( cell,
move,
recurse )

Animates the given cell state using mxCellStatePreview.moveState.

stopRecursion

mxMorphing.prototype.stopRecursion = function( state,
delta )

Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.

getDelta

mxMorphing.prototype.getDelta = function( state )

Returns the vector between the current rendered state and the future location of the state after the display will be updated.

getOriginForCell

mxMorphing.prototype.getOriginForCell = function( cell )

Returns the top, left corner of the given cell. TODO: Improve performance by using caching inside this method as the result per cell never changes during the lifecycle of this object.

mxImageBundle

Maps from keys to base64 encoded images or file locations. All values must be URLs or use the format data:image/format followed by a comma and the base64 encoded image data, eg. “data:image/gif,XYZ”, where XYZ is the base64 encoded image data.

To add a new image bundle to an existing graph, the following code is used

var bundle = new mxImageBundle(alt);
bundle.putImage('myImage', 'data:image/gif,R0lGODlhEAAQAMIGAAAAAICAAICAgP' +
  '//AOzp2O3r2////////yH+FUNyZWF0ZWQgd2l0aCBUaGUgR0lNUAAh+QQBCgAHACwAAAAA' +
  'EAAQAAADTXi63AowynnAMDfjPUDlnAAJhmeBFxAEloliKltWmiYCQvfVr6lBPB1ggxN1hi' +
  'laSSASFQpIV5HJBDyHpqK2ejVRm2AAgZCdmCGO9CIBADs=', fallback);
bundle.putImage('mySvgImage', 'data:image/svg+xml,' + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">' +
  '<linearGradient id="gradient"><stop offset="10%" stop-color="#F00"/>' +
  '<stop offset="90%" stop-color="#fcc"/></linearGradient>' +
  '<rect fill="url(#gradient)" width="100%" height="100%"/></svg>'), fallback);
graph.addImageBundle(bundle);
(end);

Alt is an optional boolean (default is false) that specifies if the value
or the fallback should be returned in <getImage>.

The image can then be referenced in any cell style using image=myImage.
If you are using mxOutline, you should use the same image bundles in the
graph that renders the outline.

The keys for images are resolved in <mxGraph.postProcessCellStyle> and
turned into a data URI if the returned value has a short data URI format
as specified above.

A typical value for the fallback is a MTHML link as defined in RFC 2557.
Note that this format requires a file to be dynamically created on the
server-side, or the page that contains the graph to be modified to contain
the resources, this can be done by adding a comment that contains the
resource in the HEAD section of the page after the title tag.

This type of fallback mechanism should be used in IE6 and IE7. IE8 does
support data URIs, but the maximum size is limited to 32 KB, which means
all data URIs should be limited to 32 KB.

Summary

Variables
images	Maps from keys to images.
alt	Specifies if the fallback representation should be returned.
Functions
putImage	Adds the specified entry to the map.
getImage	Returns the value for the given key.

Variables

images

mxImageBundle.prototype.images

Maps from keys to images.

alt

Specifies if the fallback representation should be returned.

Functions

putImage

mxImageBundle.prototype.putImage = function( key,
value,
fallback )

Adds the specified entry to the map. The entry is an object with a value and fallback property as specified in the arguments.

getImage

mxImageBundle.prototype.getImage = function( key )

Returns the value for the given key. This returns the value or fallback, depending on alt. The fallback is returned if alt is true, the value is returned otherwise.

mxImageExport

Creates a new image export instance to be used with an export canvas. Here is an example that uses this class to create an image via a backend using <mxXmlExportCanvas>.

var xmlDoc = mxUtils.createXmlDocument();
var root = xmlDoc.createElement('output');
xmlDoc.appendChild(root);

var xmlCanvas = new mxXmlCanvas2D(root);
var imgExport = new mxImageExport();
imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);

var bounds = graph.getGraphBounds();
var w = Math.ceil(bounds.x + bounds.width);
var h = Math.ceil(bounds.y + bounds.height);

var xml = mxUtils.getXml(root);
new mxXmlRequest('export', 'format=png&w=' + w +
     '&h=' + h + '&bg=#F9F7ED&xml=' + encodeURIComponent(xml))
     .simulate(document, '_blank');

Summary

Functions
mxImageExport	Constructs a new image export.
Variables
includeOverlays	Specifies if overlays should be included in the export.
Functions
drawState	Draws the given state and all its descendants to the given canvas.
drawState	Draws the given state and all its descendants to the given canvas.
getLinkForCellState	Returns the link for the given cell state and canvas.
drawCellState	Draws the given state to the given canvas.
drawShape	Draws the shape of the given state.
drawText	Draws the text of the given state.
drawOverlays	Draws the overlays for the given state.

Functions

mxImageExport

function mxImageExport()

Constructs a new image export.

Variables

includeOverlays

mxImageExport.prototype.includeOverlays

Specifies if overlays should be included in the export. Default is false.

Functions

drawState

mxImageExport.prototype.drawState = function( state,
canvas )

Draws the given state and all its descendants to the given canvas.

drawState

Draws the given state and all its descendants to the given canvas.

getLinkForCellState

mxImageExport.prototype.getLinkForCellState = function( state,
canvas )

Returns the link for the given cell state and canvas. This returns null.

drawCellState

mxImageExport.prototype.drawCellState = function( state,
canvas )

Draws the given state to the given canvas.

drawShape

mxImageExport.prototype.drawShape = function( state,
canvas )

Draws the shape of the given state.

drawText

mxImageExport.prototype.drawText = function( state,
canvas )

Draws the text of the given state.

drawOverlays

mxImageExport.prototype.drawOverlays = function( state,
canvas )

Draws the overlays for the given state. This is called if includeOverlays is true.

mxAbstractCanvas2D

Base class for all canvases. A description of the public API is available in mxXmlCanvas2D. All color values of mxConstants.NONE will be converted to null in the state.

Summary

Functions
mxAbstractCanvas2D	Constructs a new abstract canvas.
Variables
converter	Holds the mxUrlConverter to convert image URLs.
state	Holds the current state.
states	Stack of states.
path	Holds the current path as an array.
rotateHtml	Switch for rotation of HTML.
lastX	Holds the last x coordinate.
lastY	Holds the last y coordinate.
moveOp	Contains the string used for moving in paths.
lineOp	Contains the string used for moving in paths.
quadOp	Contains the string used for quadratic paths.
curveOp	Contains the string used for bezier curves.
closeOp	Holds the operator for closing curves.
pointerEvents	Boolean value that specifies if events should be handled.
Functions
createUrlConverter	Create a new mxUrlConverter and returns it.
reset	Resets the state of this canvas.
createState	Creates the state of the this canvas.
format	Rounds all numbers to integers.
addOp	Adds the given operation to the path.
rotatePoint	Rotates the given point and returns the result as an mxPoint.
save	Saves the current state.
restore	Restores the current state.
setLink	Sets the current link.
scale	Scales the current state.
translate	Translates the current state.
rotate	Rotates the current state.
setAlpha	Sets the current alpha.
setFillAlpha	Sets the current solid fill alpha.
setStrokeAlpha	Sets the current stroke alpha.
setFillColor	Sets the current fill color.
setGradient	Sets the current gradient.
setStrokeColor	Sets the current stroke color.
setStrokeWidth	Sets the current stroke width.
setDashed	Enables or disables dashed lines.
setDashPattern	Sets the current dash pattern.
setLineCap	Sets the current line cap.
setLineJoin	Sets the current line join.
setMiterLimit	Sets the current miter limit.
setFontColor	Sets the current font color.
setFontColor	Sets the current font color.
setFontColor	Sets the current font color.
setFontSize	Sets the current font size.
setFontFamily	Sets the current font family.
setFontStyle	Sets the current font style.
setShadow	Enables or disables and configures the current shadow.
setShadowColor	Enables or disables and configures the current shadow.
setShadowAlpha	Enables or disables and configures the current shadow.
setShadowOffset	Enables or disables and configures the current shadow.
begin	Starts a new path.
moveTo	Moves the current path the given coordinates.
lineTo	Draws a line to the given coordinates.
quadTo	Adds a quadratic curve to the current path.
curveTo	Adds a bezier curve to the current path.
arcTo	Adds the given arc to the current path.
close	Closes the current path.
end	Empty implementation for backwards compatibility.

Functions

mxAbstractCanvas2D

function mxAbstractCanvas2D()

Constructs a new abstract canvas.

Variables

converter

this.converter

Holds the mxUrlConverter to convert image URLs.

state

mxAbstractCanvas2D.prototype.state

Holds the current state.

states

mxAbstractCanvas2D.prototype.states

Stack of states.

path

mxAbstractCanvas2D.prototype.path

Holds the current path as an array.

rotateHtml

mxAbstractCanvas2D.prototype.rotateHtml

Switch for rotation of HTML. Default is false.

lastX

mxAbstractCanvas2D.prototype.lastX

Holds the last x coordinate.

lastY

mxAbstractCanvas2D.prototype.lastY

Holds the last y coordinate.

moveOp

mxAbstractCanvas2D.prototype.moveOp

Contains the string used for moving in paths. Default is ‘M’.

lineOp

mxAbstractCanvas2D.prototype.lineOp

Contains the string used for moving in paths. Default is ‘L’.

quadOp

mxAbstractCanvas2D.prototype.quadOp

Contains the string used for quadratic paths. Default is ‘Q’.

curveOp

mxAbstractCanvas2D.prototype.curveOp

Contains the string used for bezier curves. Default is ‘C’.

closeOp

mxAbstractCanvas2D.prototype.closeOp

Holds the operator for closing curves. Default is ‘Z’.

pointerEvents

mxAbstractCanvas2D.prototype.pointerEvents

Boolean value that specifies if events should be handled. Default is false.

Functions

createUrlConverter

mxAbstractCanvas2D.prototype.createUrlConverter = function()

Create a new mxUrlConverter and returns it.

reset

mxAbstractCanvas2D.prototype.reset = function()

Resets the state of this canvas.

createState

mxAbstractCanvas2D.prototype.createState = function()

Creates the state of the this canvas.

format

mxAbstractCanvas2D.prototype.format = function( value )

Rounds all numbers to integers.

addOp

mxAbstractCanvas2D.prototype.addOp = function()

Adds the given operation to the path.

rotatePoint

mxAbstractCanvas2D.prototype.rotatePoint = function( x,
y,
theta,
cx,
cy )

Rotates the given point and returns the result as an mxPoint.

save

mxAbstractCanvas2D.prototype.save = function()

Saves the current state.

restore

mxAbstractCanvas2D.prototype.restore = function()

Restores the current state.

setLink

mxAbstractCanvas2D.prototype.setLink = function( link )

Sets the current link. Hook for subclassers.

scale

mxAbstractCanvas2D.prototype.scale = function( value )

Scales the current state.

translate

mxAbstractCanvas2D.prototype.translate = function( dx,
dy )

Translates the current state.

rotate

mxAbstractCanvas2D.prototype.rotate = function( theta,
flipH,
flipV,
cx,
cy )

Rotates the current state.

setAlpha

mxAbstractCanvas2D.prototype.setAlpha = function( value )

Sets the current alpha.

setFillAlpha

mxAbstractCanvas2D.prototype.setFillAlpha = function( value )

Sets the current solid fill alpha.

setStrokeAlpha

mxAbstractCanvas2D.prototype.setStrokeAlpha = function( value )

Sets the current stroke alpha.

setFillColor

mxAbstractCanvas2D.prototype.setFillColor = function( value )

Sets the current fill color.

setGradient

mxAbstractCanvas2D.prototype.setGradient = function( color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2 )

Sets the current gradient.

setStrokeColor

mxAbstractCanvas2D.prototype.setStrokeColor = function( value )

Sets the current stroke color.

setStrokeWidth

mxAbstractCanvas2D.prototype.setStrokeWidth = function( value )

Sets the current stroke width.

setDashed

mxAbstractCanvas2D.prototype.setDashed = function( value,
fixDash )

Enables or disables dashed lines.

setDashPattern

mxAbstractCanvas2D.prototype.setDashPattern = function( value )

Sets the current dash pattern.

setLineCap

mxAbstractCanvas2D.prototype.setLineCap = function( value )

Sets the current line cap.

setLineJoin

mxAbstractCanvas2D.prototype.setLineJoin = function( value )

Sets the current line join.

setMiterLimit

mxAbstractCanvas2D.prototype.setMiterLimit = function( value )

Sets the current miter limit.

setFontColor

mxAbstractCanvas2D.prototype.setFontColor = function( value )

Sets the current font color.

setFontColor

Sets the current font color.

setFontColor

Sets the current font color.

setFontSize

mxAbstractCanvas2D.prototype.setFontSize = function( value )

Sets the current font size.

setFontFamily

mxAbstractCanvas2D.prototype.setFontFamily = function( value )

Sets the current font family.

setFontStyle

mxAbstractCanvas2D.prototype.setFontStyle = function( value )

Sets the current font style.

setShadow

mxAbstractCanvas2D.prototype.setShadow = function( enabled )

Enables or disables and configures the current shadow.

setShadowColor

mxAbstractCanvas2D.prototype.setShadowColor = function( value )

Enables or disables and configures the current shadow.

setShadowAlpha

mxAbstractCanvas2D.prototype.setShadowAlpha = function( value )

Enables or disables and configures the current shadow.

setShadowOffset

mxAbstractCanvas2D.prototype.setShadowOffset = function( dx,
dy )

Enables or disables and configures the current shadow.

begin

mxAbstractCanvas2D.prototype.begin = function()

Starts a new path.

moveTo

mxAbstractCanvas2D.prototype.moveTo = function( x,
y )

Moves the current path the given coordinates.

lineTo

mxAbstractCanvas2D.prototype.lineTo = function( x,
y )

Draws a line to the given coordinates. Uses moveTo with the op argument.

quadTo

mxAbstractCanvas2D.prototype.quadTo = function( x1,
y1,
x2,
y2 )

Adds a quadratic curve to the current path.

curveTo

mxAbstractCanvas2D.prototype.curveTo = function( x1,
y1,
x2,
y2,
x3,
y3 )

Adds a bezier curve to the current path.

arcTo

mxAbstractCanvas2D.prototype.arcTo = function( rx,
ry,
angle,
largeArcFlag,
sweepFlag,
x,
y )

Adds the given arc to the current path. This is a synthetic operation that is broken down into curves.

close

mxAbstractCanvas2D.prototype.close = function( x1,
y1,
x2,
y2,
x3,
y3 )

Closes the current path.

end

mxAbstractCanvas2D.prototype.end = function()

Empty implementation for backwards compatibility. This will be removed.

mxXmlCanvas2D

Base class for all canvases. The following methods make up the public interface of the canvas 2D for all painting in mxGraph:

save, restore
scale, translate, rotate
setAlpha, setFillAlpha, setStrokeAlpha, setFillColor, setGradient, setStrokeColor, setStrokeWidth, setDashed, setDashPattern, setLineCap, setLineJoin, setMiterLimit
setFontColor, setFontBackgroundColor, setFontBorderColor, setFontSize, setFontFamily, setFontStyle
setShadow, setShadowColor, setShadowAlpha, setShadowOffset
rect, roundrect, ellipse, image, text
begin, moveTo, lineTo, quadTo, curveTo
stroke, fill, fillAndStroke

mxAbstractCanvas2D.arcTo is an additional method for drawing paths. This is a synthetic method, meaning that it is turned into a sequence of curves by default. Subclassers may add native support for arcs.

Summary

Functions
mxXmlCanvas2D	Constructs a new abstract canvas.
Variables
root	Reference to the container for the SVG content.
textEnabled	Specifies if text output should be enabled.
compressed	Specifies if the output should be compressed by removing redundant calls.
Functions
writeDefaults
format	Returns a formatted number with 2 decimal places.
createElement	Creates the given element using the owner document of root.
save	Saves the drawing state.
restore	Restores the drawing state.
scale	Scales the output.
translate	Translates the output.
rotate	Rotates and/or flips the output around a given center.
setAlpha	Sets the current alpha.
setFillAlpha	Sets the current fill alpha.
setStrokeAlpha	Sets the current stroke alpha.
setFillColor	Sets the current fill color.
setGradient	Sets the gradient.
setStrokeColor	Sets the current stroke color.
setStrokeWidth	Sets the current stroke width.
setDashed	Enables or disables dashed lines.
setDashPattern	Sets the current dash pattern.
setLineCap	Sets the line cap.
setLineJoin	Sets the line join.
setMiterLimit	Sets the miter limit.
setFontColor	Sets the current font color.
setFontBackgroundColor	Sets the current font background color.
setFontBorderColor	Sets the current font border color.
setFontSize	Sets the current font size.
setFontFamily	Sets the current font family.
setFontStyle	Sets the current font style.
setShadow	Enables or disables shadows.
setShadowColor	Sets the current shadow color.
setShadowAlpha	Sets the current shadows alpha.
setShadowOffset	Sets the current shadow offset.
rect	Puts a rectangle into the drawing buffer.
roundrect	Puts a rounded rectangle into the drawing buffer.
ellipse	Puts an ellipse into the drawing buffer.
image	Paints an image.
begin	Starts a new path and puts it into the drawing buffer.
moveTo	Moves the current path the given point.
lineTo	Draws a line to the given coordinates.
quadTo	Adds a quadratic curve to the current path.
curveTo	Adds a bezier curve to the current path.
close	Closes the current path.
text	Paints the given text.
stroke	Paints the outline of the current drawing buffer.
fill	Fills the current drawing buffer.
fillAndStroke	Fills the current drawing buffer and its outline.

Functions

mxXmlCanvas2D

function mxXmlCanvas2D( root )

Constructs a new abstract canvas.

Variables

root

this.root

Reference to the container for the SVG content.

textEnabled

mxXmlCanvas2D.prototype.textEnabled

Specifies if text output should be enabled. Default is true.

compressed

mxXmlCanvas2D.prototype.compressed

Specifies if the output should be compressed by removing redundant calls. Default is true.

Functions

writeDefaults

mxXmlCanvas2D.prototype.writeDefaults = function()

Writes the rendering defaults to root

format

mxXmlCanvas2D.prototype.format = function( value )

Returns a formatted number with 2 decimal places.

createElement

mxXmlCanvas2D.prototype.createElement = function( name )

Creates the given element using the owner document of root.

save

mxXmlCanvas2D.prototype.save = function()

Saves the drawing state.

restore

mxXmlCanvas2D.prototype.restore = function()

Restores the drawing state.

scale

mxXmlCanvas2D.prototype.scale = function( value )

Scales the output.

Parameters

scale

Number that represents the scale where 1 is equal to 100%.

translate

mxXmlCanvas2D.prototype.translate = function( dx,
dy )

Translates the output.

Parameters

dx	Number that specifies the horizontal translation.
dy	Number that specifies the vertical translation.

rotate

mxXmlCanvas2D.prototype.rotate = function( theta,
flipH,
flipV,
cx,
cy )

Rotates and/or flips the output around a given center. (Note: Due to limitations in VML, the rotation cannot be concatenated.)

Parameters

theta	Number that represents the angle of the rotation (in degrees).
flipH	Boolean indicating if the output should be flipped horizontally.
flipV	Boolean indicating if the output should be flipped vertically.
cx	Number that represents the x-coordinate of the rotation center.
cy	Number that represents the y-coordinate of the rotation center.

setAlpha

mxXmlCanvas2D.prototype.setAlpha = function( value )

Sets the current alpha.

Parameters

value

Number that represents the new alpha. Possible values are between 1 (opaque) and 0 (transparent).

setFillAlpha

mxXmlCanvas2D.prototype.setFillAlpha = function( value )

Sets the current fill alpha.

Parameters

value

Number that represents the new fill alpha. Possible values are between 1 (opaque) and 0 (transparent).

setStrokeAlpha

mxXmlCanvas2D.prototype.setStrokeAlpha = function( value )

Sets the current stroke alpha.

Parameters

value

Number that represents the new stroke alpha. Possible values are between 1 (opaque) and 0 (transparent).

setFillColor

mxXmlCanvas2D.prototype.setFillColor = function( value )

Sets the current fill color.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setGradient

mxXmlCanvas2D.prototype.setGradient = function( color1,
color2,
x,
y,
w,
h,
direction,
alpha1,
alpha2 )

Sets the gradient. Note that the coordinates may be ignored by some implementations.

Parameters

color1	Hexadecimal representation of the start color.
color2	Hexadecimal representation of the end color.
x	X-coordinate of the gradient region.
y	y-coordinate of the gradient region.
w	Width of the gradient region.
h	Height of the gradient region.
direction	One of mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH or mxConstants.DIRECTION_WEST.
alpha1	Optional alpha of the start color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent).
alpha2	Optional alpha of the end color. Default is 1. Possible values are between 1 (opaque) and 0 (transparent).

setStrokeColor

mxXmlCanvas2D.prototype.setStrokeColor = function( value )

Sets the current stroke color.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setStrokeWidth

mxXmlCanvas2D.prototype.setStrokeWidth = function( value )

Sets the current stroke width.

Parameters

value

Numeric representation of the stroke width.

setDashed

mxXmlCanvas2D.prototype.setDashed = function( value,
fixDash )

Enables or disables dashed lines.

Parameters

value	Boolean that specifies if dashed lines should be enabled.
value	Boolean that specifies if the stroke width should be ignored for the dash pattern. Default is false.

setDashPattern

mxXmlCanvas2D.prototype.setDashPattern = function( value )

Sets the current dash pattern. Default is ‘3 3’.

Parameters

value	String that represents the dash pattern, which is a sequence of numbers defining the length of the dashes and the length of the spaces
between the dashes. The lengths are relative to the line width	a length of 1 is equals to the line width.

setLineCap

mxXmlCanvas2D.prototype.setLineCap = function( value )

Sets the line cap. Default is ‘flat’ which corresponds to ‘butt’ in SVG.

Parameters

value

String that represents the line cap. Possible values are flat, round and square.

setLineJoin

mxXmlCanvas2D.prototype.setLineJoin = function( value )

Sets the line join. Default is ‘miter’.

Parameters

value

String that represents the line join. Possible values are miter, round and bevel.

setMiterLimit

mxXmlCanvas2D.prototype.setMiterLimit = function( value )

Sets the miter limit. Default is 10.

Parameters

value

Number that represents the miter limit.

setFontColor

mxXmlCanvas2D.prototype.setFontColor = function( value )

Sets the current font color. Default is ‘#000000’.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setFontBackgroundColor

mxXmlCanvas2D.prototype.setFontBackgroundColor = function( value )

Sets the current font background color.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setFontBorderColor

mxXmlCanvas2D.prototype.setFontBorderColor = function( value )

Sets the current font border color.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setFontSize

mxXmlCanvas2D.prototype.setFontSize = function( value )

Sets the current font size. Default is mxConstants.DEFAULT_FONTSIZE.

Parameters

value

Numeric representation of the font size.

setFontFamily

mxXmlCanvas2D.prototype.setFontFamily = function( value )

Sets the current font family. Default is mxConstants.DEFAULT_FONTFAMILY.

Parameters

value

String representation of the font family. This handles the same values as the CSS font-family property.

setFontStyle

mxXmlCanvas2D.prototype.setFontStyle = function( value )

Sets the current font style.

Parameters

value

Numeric representation of the font family. This is the sum of the font styles from mxConstants.

setShadow

mxXmlCanvas2D.prototype.setShadow = function( value )

Enables or disables shadows.

Parameters

value

Boolean that specifies if shadows should be enabled.

setShadowColor

mxXmlCanvas2D.prototype.setShadowColor = function( value )

Sets the current shadow color. Default is mxConstants.SHADOWCOLOR.

Parameters

value

Hexadecimal representation of the color or ‘none’.

setShadowAlpha

mxXmlCanvas2D.prototype.setShadowAlpha = function( value )

Sets the current shadows alpha. Default is mxConstants.SHADOW_OPACITY.

Parameters

value

Number that represents the new alpha. Possible values are between 1 (opaque) and 0 (transparent).

setShadowOffset

mxXmlCanvas2D.prototype.setShadowOffset = function( dx,
dy )

Sets the current shadow offset.

Parameters

dx	Number that represents the horizontal offset of the shadow.
dy	Number that represents the vertical offset of the shadow.

rect

mxXmlCanvas2D.prototype.rect = function( x,
y,
w,
h )

Puts a rectangle into the drawing buffer.

Parameters

x	Number that represents the x-coordinate of the rectangle.
y	Number that represents the y-coordinate of the rectangle.
w	Number that represents the width of the rectangle.
h	Number that represents the height of the rectangle.

roundrect

mxXmlCanvas2D.prototype.roundrect = function( x,
y,
w,
h,
dx,
dy )

Puts a rounded rectangle into the drawing buffer.

Parameters

x	Number that represents the x-coordinate of the rectangle.
y	Number that represents the y-coordinate of the rectangle.
w	Number that represents the width of the rectangle.
h	Number that represents the height of the rectangle.
dx	Number that represents the horizontal rounding.
dy	Number that represents the vertical rounding.

ellipse

mxXmlCanvas2D.prototype.ellipse = function( x,
y,
w,
h )

Puts an ellipse into the drawing buffer.

Parameters

x	Number that represents the x-coordinate of the ellipse.
y	Number that represents the y-coordinate of the ellipse.
w	Number that represents the width of the ellipse.
h	Number that represents the height of the ellipse.

image

mxXmlCanvas2D.prototype.image = function( x,
y,
w,
h,
src,
aspect,
flipH,
flipV )

Paints an image.

Parameters

x	Number that represents the x-coordinate of the image.
y	Number that represents the y-coordinate of the image.
w	Number that represents the width of the image.
h	Number that represents the height of the image.
src	String that specifies the URL of the image.
aspect	Boolean indicating if the aspect of the image should be preserved.
flipH	Boolean indicating if the image should be flipped horizontally.
flipV	Boolean indicating if the image should be flipped vertically.

begin

mxXmlCanvas2D.prototype.begin = function()

Starts a new path and puts it into the drawing buffer.

moveTo

mxXmlCanvas2D.prototype.moveTo = function( x,
y )

Moves the current path the given point.

Parameters

x	Number that represents the x-coordinate of the point.
y	Number that represents the y-coordinate of the point.

lineTo

mxXmlCanvas2D.prototype.lineTo = function( x,
y )

Draws a line to the given coordinates.

Parameters

x	Number that represents the x-coordinate of the endpoint.
y	Number that represents the y-coordinate of the endpoint.

quadTo

mxXmlCanvas2D.prototype.quadTo = function( x1,
y1,
x2,
y2 )

Adds a quadratic curve to the current path.

Parameters

x1	Number that represents the x-coordinate of the control point.
y1	Number that represents the y-coordinate of the control point.
x2	Number that represents the x-coordinate of the endpoint.
y2	Number that represents the y-coordinate of the endpoint.

curveTo

mxXmlCanvas2D.prototype.curveTo = function( x1,
y1,
x2,
y2,
x3,
y3 )

Adds a bezier curve to the current path.

Parameters

x1	Number that represents the x-coordinate of the first control point.
y1	Number that represents the y-coordinate of the first control point.
x2	Number that represents the x-coordinate of the second control point.
y2	Number that represents the y-coordinate of the second control point.
x3	Number that represents the x-coordinate of the endpoint.
y3	Number that represents the y-coordinate of the endpoint.

close

mxXmlCanvas2D.prototype.close = function()

Closes the current path.

text

mxXmlCanvas2D.prototype.text = function( x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir )

Paints the given text. Possible values for format are empty string for plain text and html for HTML markup. Background and border color as well as clipping is not available in plain text labels for VML. HTML labels are not available as part of shapes with no foreignObject support in SVG (eg. IE9, IE10).

Parameters

x	Number that represents the x-coordinate of the text.
y	Number that represents the y-coordinate of the text.
w	Number that represents the available width for the text or 0 for automatic width.
h	Number that represents the available height for the text or 0 for automatic height.
str	String that specifies the text to be painted.
align	String that represents the horizontal alignment.
valign	String that represents the vertical alignment.
wrap	Boolean that specifies if word-wrapping is enabled. Requires w > 0.
format	Empty string for plain text or ‘html’ for HTML markup.
overflow	Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
clip	Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
rotation	Number that specifies the angle of the rotation around the anchor point of the text.
dir	Optional string that specifies the text direction. Possible values are rtl and lrt.

stroke

mxXmlCanvas2D.prototype.stroke = function()

Paints the outline of the current drawing buffer.

fill

mxXmlCanvas2D.prototype.fill = function()

Fills the current drawing buffer.

fillAndStroke

mxXmlCanvas2D.prototype.fillAndStroke = function()

Fills the current drawing buffer and its outline.

mxSvgCanvas2D

Extends mxAbstractCanvas2D to implement a canvas for SVG. This canvas writes all calls as SVG output to the given SVG root node.

var svgDoc = mxUtils.createXmlDocument();
var root = (svgDoc.createElementNS != null) ?
     svgDoc.createElementNS(mxConstants.NS_SVG, 'svg') : svgDoc.createElement('svg');

if (svgDoc.createElementNS == null)
{
  root.setAttribute('xmlns', mxConstants.NS_SVG);
  root.setAttribute('xmlns:xlink', mxConstants.NS_XLINK);
}
else
{
  root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', mxConstants.NS_XLINK);
}

var bounds = graph.getGraphBounds();
root.setAttribute('width', (bounds.x + bounds.width + 4) + 'px');
root.setAttribute('height', (bounds.y + bounds.height + 4) + 'px');
root.setAttribute('version', '1.1');

svgDoc.appendChild(root);

var svgCanvas = new mxSvgCanvas2D(root);

A description of the public API is available in mxXmlCanvas2D.

To disable anti-aliasing in the output, use the following code.

graph.view.canvas.ownerSVGElement.setAttribute('shape-rendering', 'crispEdges');

Or set the respective attribute in the SVG element directly.

Summary

Functions
mxSvgCanvas2D	Constructs a new SVG canvas.
Variables
root	Reference to the container for the SVG content.
gradients	Local cache of gradients for quick lookups.
defs	Reference to the defs section of the SVG document.
styleEnabled	Stores the value of styleEnabled passed to the constructor.
path	Holds the current DOM node.
matchHtmlAlignment	Specifies if plain text output should match the vertical HTML alignment.
textEnabled	Specifies if text output should be enabled.
foEnabled	Specifies if use of foreignObject for HTML markup is allowed.
foAltText	Specifies the fallback text for unsupported foreignObjects in exported documents.
foOffset	Offset to be used for foreignObjects.
textOffset	Offset to be used for text elements.
imageOffset	Offset to be used for image elements.
strokeTolerance	Adds transparent paths for strokes.
minStrokeWidth	Minimum stroke width for output.
refCount	Local counter for references in SVG export.
blockImagePointerEvents	Specifies if a transparent rectangle should be added on top of images to absorb all pointer events.
lineHeightCorrection	Correction factor for mxConstants.LINE_HEIGHT in HTML output.
pointerEventsValue	Default value for active pointer events.
fontMetricsPadding	Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels.
cacheOffsetSize	Specifies if offsetWidth and offsetHeight should be cached.
Functions
format	Rounds all numbers to 2 decimal points.
getBaseUrl	Returns the URL of the page without the hash part.
reset	Returns any offsets for rendering pixels.
createStyle	Creates the optional style section.
createElement	Private helper function to create SVG elements
getAlternateContent	Returns the alternate content for the given foreignObject.
createGradientId	Private helper function to create SVG elements
getSvgGradient	Private helper function to create SVG elements
createSvgGradient	Creates the given SVG gradient.
addNode	Private helper function to create SVG elements
updateFill	Transfers the stroke attributes from <state> to <node>.
getCurrentStrokeWidth	Returns the current stroke width (>= 1), ie.
updateStroke	Transfers the stroke attributes from <state> to <node>.
updateStrokeAttributes	Transfers the stroke attributes from <state> to <node>.
createDashPattern	Creates the SVG dash pattern for the given state.
createTolerance	Creates a hit detection tolerance shape for the given node.
createShadow	Creates a shadow for the given node.
setLink	Experimental implementation for hyperlinks.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
rect	Private helper function to create SVG elements
roundrect	Private helper function to create SVG elements
ellipse	Private helper function to create SVG elements
image	Private helper function to create SVG elements
convertHtml	Converts the given HTML string to XHTML.
createDiv	Private helper function to create SVG elements
text	Paints the given text.
createClip	Creates a clip for the given coordinates.
text	Paints the given text.
updateFont	Updates the text properties for the given node.
addTextBackground	Background color and border
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills and paints the outline of the current path.

Functions

mxSvgCanvas2D

function mxSvgCanvas2D( root,
styleEnabled )

Constructs a new SVG canvas.

Parameters

root	SVG container for the output.
styleEnabled	Optional boolean that specifies if a style section should be added. The style section sets the default font-size, font-family and stroke-miterlimit globally. Default is false.

Variables

root

this.root

Reference to the container for the SVG content.

gradients

this.gradients

Local cache of gradients for quick lookups.

defs

this.defs

Reference to the defs section of the SVG document. Only for export.

styleEnabled

this.styleEnabled

Stores the value of styleEnabled passed to the constructor.

path

Holds the current DOM node.

matchHtmlAlignment

mxSvgCanvas2D.prototype.matchHtmlAlignment

Specifies if plain text output should match the vertical HTML alignment. Defaul is true.

textEnabled

mxSvgCanvas2D.prototype.textEnabled

Specifies if text output should be enabled. Default is true.

foEnabled

mxSvgCanvas2D.prototype.foEnabled

Specifies if use of foreignObject for HTML markup is allowed. Default is true.

foAltText

mxSvgCanvas2D.prototype.foAltText

Specifies the fallback text for unsupported foreignObjects in exported documents. Default is ‘[Object]’. If this is set to null then no fallback text is added to the exported document.

foOffset

mxSvgCanvas2D.prototype.foOffset

Offset to be used for foreignObjects.

textOffset

mxSvgCanvas2D.prototype.textOffset

Offset to be used for text elements.

imageOffset

mxSvgCanvas2D.prototype.imageOffset

Offset to be used for image elements.

strokeTolerance

mxSvgCanvas2D.prototype.strokeTolerance

Adds transparent paths for strokes.

minStrokeWidth

mxSvgCanvas2D.prototype.minStrokeWidth

Minimum stroke width for output.

refCount

mxSvgCanvas2D.prototype.refCount

Local counter for references in SVG export.

blockImagePointerEvents

mxSvgCanvas2D.prototype.blockImagePointerEvents

Specifies if a transparent rectangle should be added on top of images to absorb all pointer events. Default is false. This is only needed in Firefox to disable control-clicks on images.

lineHeightCorrection

mxSvgCanvas2D.prototype.lineHeightCorrection

Correction factor for mxConstants.LINE_HEIGHT in HTML output. Default is 1.

pointerEventsValue

mxSvgCanvas2D.prototype.pointerEventsValue

Default value for active pointer events. Default is all.

fontMetricsPadding

mxSvgCanvas2D.prototype.fontMetricsPadding

Padding to be added for text that is not wrapped to account for differences in font metrics on different platforms in pixels. Default is 10.

cacheOffsetSize

mxSvgCanvas2D.prototype.cacheOffsetSize

Specifies if offsetWidth and offsetHeight should be cached. Default is true. This is used to speed up repaint of text in <updateText>.

Functions

format

mxSvgCanvas2D.prototype.format = function( value )

Rounds all numbers to 2 decimal points.

getBaseUrl

mxSvgCanvas2D.prototype.getBaseUrl = function()

Returns the URL of the page without the hash part. This needs to use href to include any search part with no params (ie question mark alone). This is a workaround for the fact that window.location.search is empty if there is no search string behind the question mark.

reset

mxSvgCanvas2D.prototype.reset = function()

Returns any offsets for rendering pixels.

createStyle

mxSvgCanvas2D.prototype.createStyle = function( x )

Creates the optional style section.

createElement

mxSvgCanvas2D.prototype.createElement = function( tagName,
namespace )

Private helper function to create SVG elements

getAlternateContent

Returns the alternate content for the given foreignObject.

createGradientId

mxSvgCanvas2D.prototype.createGradientId = function( start,
end,
alpha1,
alpha2,
direction )

Private helper function to create SVG elements

getSvgGradient

mxSvgCanvas2D.prototype.getSvgGradient = function( start,
end,
alpha1,
alpha2,
direction )

Private helper function to create SVG elements

createSvgGradient

mxSvgCanvas2D.prototype.createSvgGradient = function( start,
end,
alpha1,
alpha2,
direction )

Creates the given SVG gradient.

addNode

mxSvgCanvas2D.prototype.addNode = function( filled,
stroked )

Private helper function to create SVG elements

updateFill

mxSvgCanvas2D.prototype.updateFill = function()

Transfers the stroke attributes from <state> to <node>.

getCurrentStrokeWidth

mxSvgCanvas2D.prototype.getCurrentStrokeWidth = function()

Returns the current stroke width (>= 1), ie. max(1, this.format(this.state.strokeWidth * this.state.scale)).

updateStroke

mxSvgCanvas2D.prototype.updateStroke = function()

Transfers the stroke attributes from <state> to <node>.

updateStrokeAttributes

mxSvgCanvas2D.prototype.updateStrokeAttributes = function()

Transfers the stroke attributes from <state> to <node>.

createDashPattern

mxSvgCanvas2D.prototype.createDashPattern = function( scale )

Creates the SVG dash pattern for the given state.

createTolerance

mxSvgCanvas2D.prototype.createTolerance = function( node )

Creates a hit detection tolerance shape for the given node.

createShadow

mxSvgCanvas2D.prototype.createShadow = function( node )

Creates a shadow for the given node.

setLink

mxSvgCanvas2D.prototype.setLink = function( link )

Experimental implementation for hyperlinks.

rotate

mxSvgCanvas2D.prototype.rotate = function( theta,
flipH,
flipV,
cx,
cy )

Sets the rotation of the canvas. Note that rotation cannot be concatenated.

begin

mxSvgCanvas2D.prototype.begin = function()

Extends superclass to create path.

rect

mxSvgCanvas2D.prototype.rect = function( x,
y,
w,
h )

Private helper function to create SVG elements

roundrect

mxSvgCanvas2D.prototype.roundrect = function( x,
y,
w,
h,
dx,
dy )

Private helper function to create SVG elements

ellipse

mxSvgCanvas2D.prototype.ellipse = function( x,
y,
w,
h )

Private helper function to create SVG elements

image

mxSvgCanvas2D.prototype.image = function( x,
y,
w,
h,
src,
aspect,
flipH,
flipV )

Private helper function to create SVG elements

convertHtml

mxSvgCanvas2D.prototype.convertHtml = function( val )

Converts the given HTML string to XHTML.

createDiv

mxSvgCanvas2D.prototype.createDiv = function( str,
align,
valign,
style,
overflow,
whiteSpace )

Private helper function to create SVG elements

text

mxSvgCanvas2D.prototype.text = function( x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir )

Paints the given text. Possible values for format are empty string for plain text and html for HTML markup. Note that HTML markup is only supported if foreignObject is supported and foEnabled is true. (This means IE9 and later does currently not support HTML text as part of shapes.)

createClip

mxSvgCanvas2D.prototype.createClip = function( x,
y,
w,
h )

Creates a clip for the given coordinates.

text

Paints the given text. Possible values for format are empty string for plain text and html for HTML markup.

updateFont

mxSvgCanvas2D.prototype.updateFont = function( node )

Updates the text properties for the given node. (NOTE: For this to work in IE, the given node must be a text or tspan element.)

addTextBackground

mxSvgCanvas2D.prototype.addTextBackground = function( node,
str,
x,
y,
w,
h,
align,
valign,
overflow )

Background color and border

stroke

mxSvgCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxSvgCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxSvgCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

mxVmlCanvas2D

Implements a canvas to be used for rendering VML. Here is an example of implementing a fallback for SVG images which are not supported in VML-based browsers.

var mxVmlCanvas2DImage = mxVmlCanvas2D.prototype.image;
mxVmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
{
  if (src.substring(src.length - 4, src.length) == '.svg')
  {
    src = 'http://www.jgraph.com/images/mxgraph.gif';
  }

  mxVmlCanvas2DImage.apply(this, arguments);
};

To disable anti-aliasing in the output, use the following code.

document.createStyleSheet().cssText = mxClient.VML_PREFIX + '\\:*{antialias:false;)}';

A description of the public API is available in mxXmlCanvas2D. Note that there is a known issue in VML where gradients are painted using the outer bounding box of rotated shapes, not the actual bounds of the shape. See also text for plain text label restrictions in shapes for VML.

Summary

Variables
root	Reference to the container for the SVG content.
path	Holds the current DOM node.
textEnabled	Specifies if text output should be enabledetB.
moveOp	Contains the string used for moving in paths.
lineOp	Contains the string used for moving in paths.
curveOp	Contains the string used for bezier curves.
closeOp	Holds the operator for closing curves.
rotatedHtmlBackground	Background color for rotated HTML.
vmlScale	Specifies the scale used to draw VML shapes.
Functions
createElement	Creates the given element using the document.
createVmlElement	Creates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.
addNode	Adds the current node to the root.
createTransparentFill	Creates a transparent fill.
createFill	Creates a fill for the current state.
createStroke	Creates a fill for the current state.
getVmlDashPattern	Returns a VML dash pattern for the current dashPattern.
createShadow	Creates a shadow for the given node.
createShadowFill	Creates the fill for the shadow.
createShadowStroke	Creates the stroke for the shadow.
rotate	Sets the rotation of the canvas.
begin	Extends superclass to create path.
quadTo	Replaces quadratic curve with bezier curve in VML.
createRect	Sets the glass gradient.
rect	Sets the current path to a rectangle.
roundrect	Sets the current path to a rounded rectangle.
ellipse	Sets the current path to an ellipse.
image	Paints an image.
createText	Creates the innermost element that contains the HTML text.
text	Paints the given text.
plainText	Paints the outline of the current path.
stroke	Paints the outline of the current path.
fill	Fills the current path.
fillAndStroke	Fills and paints the outline of the current path.

Variables

root

this.root

Reference to the container for the SVG content.

path

Holds the current DOM node.

textEnabled

mxVmlCanvas2D.prototype.textEnabled

Specifies if text output should be enabledetB. Default is true.

moveOp

mxVmlCanvas2D.prototype.moveOp

Contains the string used for moving in paths. Default is ‘m’.

lineOp

mxVmlCanvas2D.prototype.lineOp

Contains the string used for moving in paths. Default is ‘l’.

curveOp

mxVmlCanvas2D.prototype.curveOp

Contains the string used for bezier curves. Default is ‘c’.

closeOp

mxVmlCanvas2D.prototype.closeOp

Holds the operator for closing curves. Default is ‘x e’.

rotatedHtmlBackground

mxVmlCanvas2D.prototype.rotatedHtmlBackground

Background color for rotated HTML. Default is ‘’. This can be set to eg. white to improve rendering of rotated text in VML for IE9.

vmlScale

mxVmlCanvas2D.prototype.vmlScale

Specifies the scale used to draw VML shapes.

Functions

createElement

mxVmlCanvas2D.prototype.createElement = function( name )

Creates the given element using the document.

createVmlElement

mxVmlCanvas2D.prototype.createVmlElement = function( name )

Creates a new element using createElement and prefixes the given name with mxClient.VML_PREFIX.

addNode

mxVmlCanvas2D.prototype.addNode = function( filled,
stroked )

Adds the current node to the root.

createTransparentFill

mxVmlCanvas2D.prototype.createTransparentFill = function()

Creates a transparent fill.

createFill

mxVmlCanvas2D.prototype.createFill = function()

Creates a fill for the current state.

createStroke

mxVmlCanvas2D.prototype.createStroke = function()

Creates a fill for the current state.

getVmlDashPattern

Returns a VML dash pattern for the current dashPattern. See http://msdn.microsoft.com/en-us/library/bb264085(v=vs.85).aspx

createShadow

mxVmlCanvas2D.prototype.createShadow = function( node,
filled,
stroked )

Creates a shadow for the given node.

createShadowFill

mxVmlCanvas2D.prototype.createShadowFill = function()

Creates the fill for the shadow.

createShadowStroke

mxVmlCanvas2D.prototype.createShadowStroke = function()

Creates the stroke for the shadow.

rotate

mxVmlCanvas2D.prototype.rotate = function( theta,
flipH,
flipV,
cx,
cy )

Sets the rotation of the canvas. Note that rotation cannot be concatenated.

begin

mxVmlCanvas2D.prototype.begin = function()

Extends superclass to create path.

quadTo

mxVmlCanvas2D.prototype.quadTo = function( x1,
y1,
x2,
y2 )

Replaces quadratic curve with bezier curve in VML.

createRect

mxVmlCanvas2D.prototype.createRect = function( nodeName,
x,
y,
w,
h )

Sets the glass gradient.

rect

mxVmlCanvas2D.prototype.rect = function( x,
y,
w,
h )

Sets the current path to a rectangle.

roundrect

mxVmlCanvas2D.prototype.roundrect = function( x,
y,
w,
h,
dx,
dy )

Sets the current path to a rounded rectangle.

ellipse

mxVmlCanvas2D.prototype.ellipse = function( x,
y,
w,
h )

Sets the current path to an ellipse.

image

mxVmlCanvas2D.prototype.image = function( x,
y,
w,
h,
src,
aspect,
flipH,
flipV )

Paints an image.

createText

Creates the innermost element that contains the HTML text.

text

mxVmlCanvas2D.prototype.text = function( x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir )

Paints the given text. Possible values for format are empty string for plain text and html for HTML markup. Clipping, text background and border are not supported for plain text in VML.

plainText

mxVmlCanvas2D.prototype.plainText = function( x,
y,
w,
h,
str,
align,
valign,
wrap,
format,
overflow,
clip,
rotation,
dir )

Paints the outline of the current path.

stroke

mxVmlCanvas2D.prototype.stroke = function()

Paints the outline of the current path.

fill

mxVmlCanvas2D.prototype.fill = function()

Fills the current path.

fillAndStroke

mxVmlCanvas2D.prototype.fillAndStroke = function()

Fills and paints the outline of the current path.

mxGuide

Implements the alignment of selection cells to other cells in the graph.

Summary

Functions
mxGuide	Constructs a new guide object.
Variables
graph	Reference to the enclosing mxGraph instance.
states	Contains the mxCellStates that are used for alignment.
horizontal	Specifies if horizontal guides are enabled.
vertical	Specifies if vertical guides are enabled.
vertical	Holds the mxShape for the horizontal guide.
vertical	Holds the mxShape for the vertical guide.
rounded	Specifies if rounded coordinates should be used.
Functions
setStates	Sets the mxCellStates that should be used for alignment.
isEnabledForEvent	Returns true if the guide should be enabled for the given native event.
getGuideTolerance	Returns the tolerance for the guides.
createGuideShape	Returns the mxShape to be used for painting the respective guide.
move	Moves the <bounds> by the given mxPoint and returnt the snapped point.
hide	Hides all current guides.
hide	Hides all current guides.
hide	Hides all current guides.
setVisible	Shows or hides the current guides.
destroy	Destroys all resources that this object uses.

Functions

mxGuide

function mxGuide( graph,
states )

Constructs a new guide object.

Variables

graph

mxGuide.prototype.graph

Reference to the enclosing mxGraph instance.

states

mxGuide.prototype.states

Contains the mxCellStates that are used for alignment.

horizontal

mxGuide.prototype.horizontal

Specifies if horizontal guides are enabled. Default is true.

vertical

mxGuide.prototype.vertical

Specifies if vertical guides are enabled. Default is true.

vertical

Holds the mxShape for the horizontal guide.

vertical

Holds the mxShape for the vertical guide.

rounded

mxGuide.prototype.rounded

Specifies if rounded coordinates should be used. Default is false.

Functions

setStates

mxGuide.prototype.setStates = function( states )

Sets the mxCellStates that should be used for alignment.

isEnabledForEvent

mxGuide.prototype.isEnabledForEvent = function( evt )

Returns true if the guide should be enabled for the given native event. This implementation always returns true.

getGuideTolerance

mxGuide.prototype.getGuideTolerance = function()

Returns the tolerance for the guides. Default value is gridSize / 2.

createGuideShape

mxGuide.prototype.createGuideShape = function( horizontal )

Returns the mxShape to be used for painting the respective guide. This implementation returns a new, dashed and crisp mxPolyline using mxConstants.GUIDE_COLOR and mxConstants.GUIDE_STROKEWIDTH as the format.

Parameters

horizontal

Boolean that specifies which guide should be created.

move

mxGuide.prototype.move = function( bounds,
delta,
gridEnabled,
clone )

Moves the <bounds> by the given mxPoint and returnt the snapped point.

hide

Hides all current guides.

hide

Hides all current guides.

hide

mxGuide.prototype.hide = function()

Hides all current guides.

setVisible

mxGuide.prototype.setVisible = function( visible )

Shows or hides the current guides.

destroy

mxGuide.prototype.destroy = function()

Destroys all resources that this object uses.

mxShape

Base class for all shapes. A shape in mxGraph is a separate implementation for SVG, VML and HTML. Which implementation to use is controlled by the dialect property which is assigned from within the mxCellRenderer when the shape is created. The dialect must be assigned for a shape, and it does normally depend on the browser and the confiuration of the graph (see mxGraph rendering hint).

For each supported shape in SVG and VML, a corresponding shape exists in mxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline. The other shapes are a combination of these shapes (eg. label and swimlane) or they consist of one or more (filled) path objects (eg. actor and cylinder). The HTML implementation is optional but may be required for a HTML-only view of the graph.

Custom Shapes

To extend from this class, the basic code looks as follows. In the special case where the custom shape consists only of one filled region or one filled region and an additional stroke the mxActor and mxCylinder should be subclassed, respectively.

function CustomShape() { }

CustomShape.prototype = new mxShape();
CustomShape.prototype.constructor = CustomShape;

To register a custom shape in an existing graph instance, one must register the shape under a new name in the graph’s cell renderer as follows:

mxCellRenderer.registerShape('customShape', CustomShape);

The second argument is the name of the constructor.

In order to use the shape you can refer to the given name above in a stylesheet. For example, to change the shape for the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'customShape';

Summary

Functions
mxShape	Constructs a new shape.
Variables
dialect	Holds the dialect in which the shape is to be painted.
scale	Holds the scale in which the shape is being painted.
antiAlias	Rendering hint for configuring the canvas.
minSvgStrokeWidth	Minimum stroke width for SVG output.
bounds	Holds the mxRectangle that specifies the bounds of this shape.
points	Holds the array of mxPoints that specify the points of this shape.
node	Holds the outermost DOM node that represents this shape.
state	Optional reference to the corresponding mxCellState.
style	Optional reference to the style of the corresponding mxCellState.
boundingBox	Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.
stencil	Holds the mxStencil that defines the shape.
svgStrokeTolerance	Event-tolerance for SVG strokes (in px).
pointerEvents	Specifies if pointer events should be handled.
svgPointerEvents	Specifies if pointer events should be handled.
shapePointerEvents	Specifies if pointer events outside of shape should be handled.
stencilPointerEvents	Specifies if pointer events outside of stencils should be handled.
vmlScale	Scale for improving the precision of VML rendering.
outline	Specifies if the shape should be drawn as an outline.
visible	Specifies if the shape is visible.
useSvgBoundingBox	Allows to use the SVG bounding box in SVG.
Functions
init	Initializes the shape by creaing the DOM node using create and adding it into the given container.
initStyles	Sets the styles to their default values.
isParseVml	Specifies if any VML should be added via insertAdjacentHtml to the DOM.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
getSvgScreenOffset	Returns 0, or 0.5 if <strokewidth> % 2 == 1.
create	Creates and returns the DOM node(s) for the shape in the given container.
createSvg	Creates and returns the SVG node(s) to represent this shape.
createVml	Creates and returns the VML node to represent this shape.
createHtml	Creates and returns the HTML DOM node(s) to represent this shape.
reconfigure	Reconfigures this shape.
redraw	Creates and returns the SVG node(s) to represent this shape.
clear	Removes all child nodes and resets all CSS.
updateBoundsFromPoints	Updates the bounds based on the points.
getLabelBounds	Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
getLabelMargins	Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.
checkBounds	Returns true if the bounds are not null and all of its variables are numeric.
createVmlGroup	Returns the temporary element used for rendering in IE8 standards mode.
redrawShape	Updates the SVG or VML shape.
createCanvas	Creates a new canvas for drawing this shape.
createSvgCanvas	Creates and returns an mxSvgCanvas2D for rendering this shape.
createVmlCanvas	Creates and returns an mxVmlCanvas2D for rendering this shape.
updateVmlContainer	Updates the bounds of the VML container.
redrawHtml	Allow optimization by replacing VML with HTML.
updateHtmlFilters	Allow optimization by replacing VML with HTML.
mixedModeHtml	Allow optimization by replacing VML with HTML.
mixedModeHtml	Allow optimization by replacing VML with HTML.
destroyCanvas	Destroys the given canvas which was used for drawing.
paint	Generic rendering code.
configureCanvas	Sets the state of the canvas for drawing the shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
updateTransform	Sets the scale and rotation on the given canvas.
paintVertexShape	Paints the vertex shape.
paintBackground	Hook for subclassers.
paintForeground	Hook for subclassers.
paintEdgeShape	Hook for subclassers.
getArcSize	Returns the arc size for the given dimension.
paintGlassEffect	Paints the glass gradient effect.
addPoints	Paints the given points with rounded corners.
resetStyles	Resets all styles.
apply	Applies the style of the given mxCellState to the shape.
setCursor	Sets the cursor on the given shape.
getCursor	Returns the current cursor.
isRoundable	Hook for subclassers.
updateBoundingBox	Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.
createBoundingBox	Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.
augmentBoundingBox	Augments the bounding box with the strokewidth and shadow offsets.
isPaintBoundsInverted	Returns true if the bounds should be inverted.
getRotation	Returns the rotation from the style.
getTextRotation	Returns the rotation for the text label.
getShapeRotation	Returns the actual rotation of the shape.
createTransparentSvgRectangle	Adds a transparent rectangle that catches all events.
setTransparentBackgroundImage	Sets a transparent background CSS style to catch all events.
releaseSvgGradients	Paints the line shape.
destroy	Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

Functions

mxShape

function mxShape( stencil )

Constructs a new shape.

Variables

dialect

mxShape.prototype.dialect

Holds the dialect in which the shape is to be painted. This can be one of the DIALECT constants in mxConstants.

scale

mxShape.prototype.scale

Holds the scale in which the shape is being painted.

antiAlias

mxShape.prototype.antiAlias

Rendering hint for configuring the canvas.

minSvgStrokeWidth

mxShape.prototype.minSvgStrokeWidth

Minimum stroke width for SVG output.

bounds

mxShape.prototype.bounds

Holds the mxRectangle that specifies the bounds of this shape.

points

mxShape.prototype.points

Holds the array of mxPoints that specify the points of this shape.

node

mxShape.prototype.node

Holds the outermost DOM node that represents this shape.

state

mxShape.prototype.state

Optional reference to the corresponding mxCellState.

style

mxShape.prototype.style

Optional reference to the style of the corresponding mxCellState.

boundingBox

mxShape.prototype.boundingBox

Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.

stencil

mxShape.prototype.stencil

Holds the mxStencil that defines the shape.

svgStrokeTolerance

mxShape.prototype.svgStrokeTolerance

Event-tolerance for SVG strokes (in px). Default is 8. This is only passed to the canvas in createSvgCanvas if pointerEvents is true.

pointerEvents

mxShape.prototype.pointerEvents

Specifies if pointer events should be handled. Default is true.

svgPointerEvents

mxShape.prototype.svgPointerEvents

Specifies if pointer events should be handled. Default is true.

shapePointerEvents

mxShape.prototype.shapePointerEvents

Specifies if pointer events outside of shape should be handled. Default is false.

stencilPointerEvents

mxShape.prototype.stencilPointerEvents

Specifies if pointer events outside of stencils should be handled. Default is false. Set this to true for backwards compatibility with the 1.x branch.

vmlScale

mxShape.prototype.vmlScale

Scale for improving the precision of VML rendering. Default is 1.

outline

mxShape.prototype.outline

Specifies if the shape should be drawn as an outline. This disables all fill colors and can be used to disable other drawing states that should not be painted for outlines. Default is false. This should be set before calling apply.

visible

mxShape.prototype.visible

Specifies if the shape is visible. Default is true.

useSvgBoundingBox

mxShape.prototype.useSvgBoundingBox

Allows to use the SVG bounding box in SVG. Default is false for performance reasons.

Functions

init

mxShape.prototype.init = function( container )

Initializes the shape by creaing the DOM node using create and adding it into the given container.

Parameters

container

DOM node that will contain the shape.

initStyles

mxShape.prototype.initStyles = function( container )

Sets the styles to their default values.

isParseVml

mxShape.prototype.isParseVml = function()

Specifies if any VML should be added via insertAdjacentHtml to the DOM. This is only needed in IE8 and only if the shape contains VML markup. This method returns true.

isHtmlAllowed

mxShape.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape. This implementation always returns false.

getSvgScreenOffset

mxShape.prototype.getSvgScreenOffset = function()

Returns 0, or 0.5 if <strokewidth> % 2 == 1.

create

mxShape.prototype.create = function( container )

Creates and returns the DOM node(s) for the shape in the given container. This implementation invokes createSvg, createHtml or createVml depending on the dialect and style settings.

Parameters

container

DOM node that will contain the shape.

createSvg

mxShape.prototype.createSvg = function()

Creates and returns the SVG node(s) to represent this shape.

createVml

mxShape.prototype.createVml = function()

Creates and returns the VML node to represent this shape.

createHtml

mxShape.prototype.createHtml = function()

Creates and returns the HTML DOM node(s) to represent this shape. This implementation falls back to createVml so that the HTML creation is optional.

reconfigure

mxShape.prototype.reconfigure = function()

Reconfigures this shape. This will update the colors etc in addition to the bounds or points.

redraw

mxShape.prototype.redraw = function()

Creates and returns the SVG node(s) to represent this shape.

clear

mxShape.prototype.clear = function()

Removes all child nodes and resets all CSS.

updateBoundsFromPoints

mxShape.prototype.updateBoundsFromPoints = function()

Updates the bounds based on the points.

getLabelBounds

mxShape.prototype.getLabelBounds = function( rect )

Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape. This method should not change the rectangle in-place. This implementation returns the given rect.

getLabelMargins

mxShape.prototype.getLabelMargins= function( rect )

Returns the scaled top, left, bottom and right margin to be used for computing the label bounds as an mxRectangle, where the bottom and right margin are defined in the width and height of the rectangle, respectively.

checkBounds

mxShape.prototype.checkBounds = function()

Returns true if the bounds are not null and all of its variables are numeric.

createVmlGroup

mxShape.prototype.createVmlGroup = function()

Returns the temporary element used for rendering in IE8 standards mode.

redrawShape

mxShape.prototype.redrawShape = function()

Updates the SVG or VML shape.

createCanvas

mxShape.prototype.createCanvas = function()

Creates a new canvas for drawing this shape. May return null.

createSvgCanvas

mxShape.prototype.createSvgCanvas = function()

Creates and returns an mxSvgCanvas2D for rendering this shape.

createVmlCanvas

mxShape.prototype.createVmlCanvas = function()

Creates and returns an mxVmlCanvas2D for rendering this shape.

updateVmlContainer

mxShape.prototype.updateVmlContainer = function()

Updates the bounds of the VML container.

redrawHtml

mxShape.prototype.redrawHtmlShape = function()

Allow optimization by replacing VML with HTML.

updateHtmlFilters

mxShape.prototype.updateHtmlFilters = function( node )

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

mixedModeHtml

Allow optimization by replacing VML with HTML.

destroyCanvas

mxShape.prototype.destroyCanvas = function( canvas )

Destroys the given canvas which was used for drawing. This implementation increments the reference counts on all shared gradients used in the canvas.

paint

mxShape.prototype.paint = function( c )

Generic rendering code.

configureCanvas

mxShape.prototype.configureCanvas = function( c,
x,
y,
w,
h )

Sets the state of the canvas for drawing the shape.

getGradientBounds

mxShape.prototype.getGradientBounds = function( c,
x,
y,
w,
h )

Returns the bounding box for the gradient box for this shape.

updateTransform

mxShape.prototype.updateTransform = function( c,
x,
y,
w,
h )

Sets the scale and rotation on the given canvas.

paintVertexShape

mxShape.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Paints the vertex shape.

paintBackground

mxShape.prototype.paintBackground = function( c,
x,
y,
w,
h )

Hook for subclassers. This implementation is empty.

paintForeground

mxShape.prototype.paintForeground = function( c,
x,
y,
w,
h )

Hook for subclassers. This implementation is empty.

paintEdgeShape

mxShape.prototype.paintEdgeShape = function( c,
pts )

Hook for subclassers. This implementation is empty.

getArcSize

mxShape.prototype.getArcSize = function( w,
h )

Returns the arc size for the given dimension.

paintGlassEffect

mxShape.prototype.paintGlassEffect = function( c,
x,
y,
w,
h,
arc )

Paints the glass gradient effect.

addPoints

mxShape.prototype.addPoints = function( c,
pts,
rounded,
arcSize,
close,
exclude,
initialMove )

Paints the given points with rounded corners.

resetStyles

mxShape.prototype.resetStyles = function()

Resets all styles.

apply

mxShape.prototype.apply = function( state )

Applies the style of the given mxCellState to the shape. This implementation assigns the following styles to local fields:

mxConstants.STYLE_FILLCOLOR => fill
mxConstants.STYLE_GRADIENTCOLOR => gradient
mxConstants.STYLE_GRADIENT_DIRECTION => gradientDirection
mxConstants.STYLE_OPACITY => opacity
mxConstants.STYLE_FILL_OPACITY => fillOpacity
mxConstants.STYLE_STROKE_OPACITY => strokeOpacity
mxConstants.STYLE_STROKECOLOR => stroke
mxConstants.STYLE_STROKEWIDTH => strokewidth
mxConstants.STYLE_SHADOW => isShadow
mxConstants.STYLE_DASHED => isDashed
mxConstants.STYLE_SPACING => spacing
mxConstants.STYLE_STARTSIZE => startSize
mxConstants.STYLE_ENDSIZE => endSize
mxConstants.STYLE_ROUNDED => isRounded
mxConstants.STYLE_STARTARROW => startArrow
mxConstants.STYLE_ENDARROW => endArrow
mxConstants.STYLE_ROTATION => rotation
mxConstants.STYLE_DIRECTION => direction
mxConstants.STYLE_GLASS => glass

This keeps a reference to the style. If you need to keep a reference to the cell, you can override this method and store a local reference to state.cell or the mxCellState itself. If outline should be true, make sure to set it before calling this method.

Parameters

state

mxCellState of the corresponding cell.

setCursor

mxShape.prototype.setCursor = function( cursor )

Sets the cursor on the given shape.

Parameters

cursor

The cursor to be used.

getCursor

mxShape.prototype.getCursor = function()

Returns the current cursor.

isRoundable

mxShape.prototype.isRoundable = function()

Hook for subclassers.

updateBoundingBox

mxShape.prototype.updateBoundingBox = function()

Updates the boundingBox for this shape using createBoundingBox and augmentBoundingBox and stores the result in boundingBox.

createBoundingBox

mxShape.prototype.createBoundingBox = function()

Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.

augmentBoundingBox

mxShape.prototype.augmentBoundingBox = function( bbox )

Augments the bounding box with the strokewidth and shadow offsets.

isPaintBoundsInverted

mxShape.prototype.isPaintBoundsInverted = function()

Returns true if the bounds should be inverted.

getRotation

mxShape.prototype.getRotation = function()

Returns the rotation from the style.

getTextRotation

mxShape.prototype.getTextRotation = function()

Returns the rotation for the text label.

getShapeRotation

mxShape.prototype.getShapeRotation = function()

Returns the actual rotation of the shape.

createTransparentSvgRectangle

mxShape.prototype.createTransparentSvgRectangle = function( x,
y,
w,
h )

Adds a transparent rectangle that catches all events.

setTransparentBackgroundImage

mxShape.prototype.setTransparentBackgroundImage = function( node )

Sets a transparent background CSS style to catch all events.

Paints the line shape.

releaseSvgGradients

mxShape.prototype.releaseSvgGradients = function( grads )

Paints the line shape.

destroy

mxShape.prototype.destroy = function()

Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using mxEvent.release.

mxStencil

Implements a generic shape which is based on a XML node as a description.

shape

The outer element is shape, that has attributes

”name”, string, required. The stencil name that uniquely identifies the shape.
”w” and “h” are optional decimal view bounds. This defines your co-ordinate system for the graphics operations in the shape. The default is 100,100.
”aspect”, optional string. Either “variable”, the default, or “fixed”. Fixed means always render the shape with the aspect ratio defined by the ratio w/h. Variable causes the ratio to match that of the geometry of the current vertex.
”strokewidth”, optional string. Either an integer or the string “inherit”. “inherit” indicates that the strokeWidth of the cell is only changed on scaling, not on resizing. Default is “1”. If numeric values are used, the strokeWidth of the cell is changed on both scaling and resizing and the value defines the multiple that is applied to the width.

connections

If you want to define specific fixed connection points on the shape use the connections element. Each constraint element within connections defines a fixed connection point on the shape. Constraints have attributes:

”perimeter”, required. 1 or 0. 0 sets the connection point where specified by x,y. 1 Causes the position of the connection point to be extrapolated from the center of the shape, through x,y to the point of intersection with the perimeter of the shape.
”x” and “y” are the position of the fixed point relative to the bounds of the shape. They can be automatically adjusted if perimeter=1. So, (0,0) is top left, (0.5,0.5) the center, (1,0.5) the center of the right hand edge of the bounds, etc. Values may be less than 0 or greater than 1 to be positioned outside of the shape.
”name”, optional string. A unique identifier for the port on the shape.

background and foreground

The path of the graphics drawing is split into two elements, foreground and background. The split is to define which part any shadow applied to the shape is derived from (the background). This, generally, means the background is the line tracing of the outside of the shape, but not always.

Any stroke, fill or fillstroke of a background must be the first element of the foreground element, they must not be used within background. If the background is empty, this is not required.

Because the background cannot have any fill or stroke, it can contain only one path, rect, roundrect or ellipse element (or none). It can also not include image, text or include-shape.

Note that the state, styling and drawing in mxGraph stencils is very close in design to that of HTML 5 canvas. Tutorials on this subject, if you’re not familiar with the topic, will give a good high-level introduction to the concepts used.

State

Rendering within the foreground and background elements has the concept of state. There are two types of operations other than state save/load, styling and drawing. The styling operations change the current state, so you can save the current state with <save/> and pull the last saved state from the state stack using <restore/>.

Styling

The elements that change colors within the current state all take a hash prefixed hex color code (“#FFEA80”).

strokecolor, this sets the color that drawing paths will be rendered in when a stroke or fillstroke command is issued.
fillcolor, this sets the color that the inside of closed paths will be rendered in when a fill or fillstroke command is issued.
fontcolor, this sets the color that fonts are rendered in when text is drawn.

alpha defines the degree of transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

fillalpha defines the degree of fill transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

strokealpha defines the degree of stroke transparency used between 1.0 for fully opaque and 0.0 for fully transparent.

strokewidth defines the integer thickness of drawing elements rendered by stroking. Use fixed=”1” to apply the value as-is, without scaling.

dashed is “1” for dashing enabled and “0” for disabled.

When dashed is enabled the current dash pattern, defined by dashpattern, is used on strokes. dashpattern is a sequence of space separated “on, off” lengths that define what distance to paint the stroke for, then what distance to paint nothing for, repeat... The default is “3 3”. You could define a more complex pattern with “5 3 2 6”, for example. Generally, it makes sense to have an even number of elements in the dashpattern, but that’s not required.

linejoin, linecap and miterlimit are best explained by the Mozilla page on Canvas styling (about halfway down). The values are all the same except we use “flat” for linecap, instead of Canvas’ “butt”.

For font styling there are.

fontsize, an integer,
fontstyle, an ORed bit pattern of bold (1), italic (2) and underline (4), i.e bold underline is “5”.
fontfamily, is a string defining the typeface to be used.

Drawing

Most drawing is contained within a path element. Again, the graphic primitives are very similar to that of HTML 5 canvas.

move to attributes required decimals (x,y).
line to attributes required decimals (x,y).
quad to required decimals (x2,y2) via control point required decimals (x1,y1).
curve to required decimals (x3,y3), via control points required decimals (x1,y1) and (x2,y2).
arc, this doesn’t follow the HTML Canvas signatures, instead it’s a copy of the SVG arc command. The SVG specification documentation gives the best description of its behaviors. The attributes are named identically, they are decimals and all required.
close ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.

Complex drawing

In addition to the graphics primitive operations there are non-primitive operations. These provide an easy method to draw some basic shapes.

rect, attributes “x”, “y”, “w”, “h”, all required decimals
roundrect, attributes “x”, “y”, “w”, “h”, all required decimals. Also “arcsize” an optional decimal attribute defining how large, the corner curves are.
ellipse, attributes “x”, “y”, “w”, “h”, all required decimals.

Note that these 3 shapes and all paths must be followed by either a fill, stroke, or fillstroke.

Text

text elements have the following attributes.

”str”, the text string to display, required.
”x” and “y”, the decimal location (x,y) of the text element, required.
”align”, the horizontal alignment of the text element, either “left”, “center” or “right”. Optional, default is “left”.
”valign”, the vertical alignment of the text element, either “top”, “middle” or “bottom”. Optional, default is “top”.
”localized”, 0 or 1, if 1 then the “str” actually contains a key to use to fetch the value out of mxResources. Optional, default is mxStencil.defaultLocalized.
”vertical”, 0 or 1, if 1 the label is rendered vertically (rotated by 90 degrees). Optional, default is 0.
”rotation”, angle in degrees (0 to 360). The angle to rotate the text by. Optional, default is 0.
”align-shape”, 0 or 1, if 0 ignore the rotation of the shape when setting the text rotation. Optional, default is 1.

If allowEval is true, then the text content of the this element can define a function which is invoked with the shape as the only argument and returns the value for the text element (ignored if the str attribute is not null).

Images

image elements can either be external URLs, or data URIs, where supported (not in IE 7-). Attributes are:

”src”, required string. Either a data URI or URL.
”x”, “y”, required decimals. The (x,y) position of the image.
”w”, “h”, required decimals. The width and height of the image.
”flipH” and “flipV”, optional 0 or 1. Whether to flip the image along the horizontal/vertical axis. Default is 0 for both.

If allowEval is true, then the text content of the this element can define a function which is invoked with the shape as the only argument and returns the value for the image source (ignored if the src attribute is not null).

Sub-shapes

include-shape allow stencils to be rendered within the current stencil by referencing the sub-stencil by name. Attributes are:

”name”, required string. The unique shape name of the stencil.
”x”, “y”, “w”, “h”, required decimals. The (x,y) position of the sub-shape and its width and height.

Summary

Functions
mxStencil	Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.
Variables
defaultLocalized	Static global variable that specifies the default value for the localized attribute of the text element.
Functions
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content and images.
Variables
desc	Holds the XML node with the stencil description.
constraints	Holds an array of mxConnectionConstraints as defined in the shape.
aspect	Holds the aspect of the shape.
w0	Holds the width of the shape.
h0	Holds the height of the shape.
bgNodes	Holds the XML node with the stencil description.
fgNodes	Holds the XML node with the stencil description.
strokewidth	Holds the strokewidth direction from the description.
Functions
parseDescription	Reads w0, h0, aspect, bgNodes and fgNodes from desc.
parseConstraints	Reads the constraints from desc into constraints using parseConstraint.
parseConstraint	Parses the given XML node and returns its mxConnectionConstraint.
evaluateTextAttribute	Gets the given attribute as a text.
evaluateAttribute	Gets the attribute for the given name from the given node.
drawShape	Draws this stencil inside the given bounds.
drawChildren	Draws this stencil inside the given bounds.
computeAspect	Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.
drawNode	Draws this stencil inside the given bounds.

Functions

mxStencil

function mxStencil( desc )

Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.

Parameters

desc	XML node that contains the stencil description.

Variables

defaultLocalized

mxStencil.defaultLocalized

Static global variable that specifies the default value for the localized attribute of the text element. Default is false.

Functions

allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content and images. Default is false. Set this to true if stencils can not contain user input.

Variables

desc

mxStencil.prototype.desc

Holds the XML node with the stencil description.

constraints

mxStencil.prototype.constraints

Holds an array of mxConnectionConstraints as defined in the shape.

aspect

mxStencil.prototype.aspect

Holds the aspect of the shape. Default is ‘auto’.

w0

mxStencil.prototype.w0

Holds the width of the shape. Default is 100.

h0

mxStencil.prototype.h0

Holds the height of the shape. Default is 100.

bgNodes

Holds the XML node with the stencil description.

fgNodes

Holds the XML node with the stencil description.

strokewidth

mxStencil.prototype.strokewidth

Holds the strokewidth direction from the description.

Functions

parseDescription

mxStencil.prototype.parseDescription = function()

Reads w0, h0, aspect, bgNodes and fgNodes from desc.

parseConstraints

mxStencil.prototype.parseConstraints = function()

Reads the constraints from desc into constraints using parseConstraint.

parseConstraint

mxStencil.prototype.parseConstraint = function( node )

Parses the given XML node and returns its mxConnectionConstraint.

evaluateTextAttribute

mxStencil.prototype.evaluateTextAttribute = function( node,
attribute,
shape )

Gets the given attribute as a text. The return value from evaluateAttribute is used as a key to mxResources.get if the localized attribute in the text node is 1 or if defaultLocalized is true.

evaluateAttribute

mxStencil.prototype.evaluateAttribute = function( node,
attribute,
shape )

Gets the attribute for the given name from the given node. If the attribute does not exist then the text content of the node is evaluated and if it is a function it is invoked with <shape> as the only argument and the return value is used as the attribute value to be returned.

drawShape

mxStencil.prototype.drawShape = function( canvas,
shape,
x,
y,
w,
h )

Draws this stencil inside the given bounds.

drawChildren

mxStencil.prototype.drawChildren = function( canvas,
shape,
x,
y,
w,
h,
node,
aspect,
disableShadow,
paint )

Draws this stencil inside the given bounds.

computeAspect

mxStencil.prototype.computeAspect = function( shape,
x,
y,
w,
h,
direction )

Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given mxRectangle.

Parameters

shape	mxShape to be drawn.
bounds	mxRectangle that should contain the stencil.
direction	Optional direction of the shape to be darwn.

drawNode

mxStencil.prototype.drawNode = function( canvas,
shape,
node,
aspect,
disableShadow,
paint )

Draws this stencil inside the given bounds.

mxStencilRegistry

A singleton class that provides a registry for stencils and the methods for painting those stencils onto a canvas or into a DOM.

Summary

Functions
addStencil	Adds the given mxStencil.
getStencil	Returns the mxStencil for the given name.

Functions

addStencil

addStencil: function( name,
stencil )

Adds the given mxStencil.

getStencil

getStencil: function( name )

Returns the mxStencil for the given name.

mxMarker

A static class that implements all markers for VML and SVG using a registry. NOTE: The signatures in this class will change.

Summary

Variables
markers	Maps from markers names to functions to paint the markers.
Functions
addMarker	Adds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.
createMarker	Returns a function to paint the given marker.

Variables

markers

Maps from markers names to functions to paint the markers.

Functions

addMarker

addMarker: function( type,
funct )

Adds a factory method that updates a given endpoint and returns a function to paint the marker onto the given canvas.

createMarker

createMarker: function( canvas,
shape,
type,
pe,
unitX,
unitY,
size,
source,
sw,
filled )

Returns a function to paint the given marker.

mxActor

Extends mxShape to implement an actor shape. If a custom shape with one filled area is needed, then this shape’s redrawPath should be overridden.

Example

function SampleShape() { }

SampleShape.prototype = new mxActor();
SampleShape.prototype.constructor = vsAseShape;

mxCellRenderer.registerShape('sample', SampleShape);
SampleShape.prototype.redrawPath = function(path, x, y, w, h)
{
  path.moveTo(0, 0);
  path.lineTo(w, h);
  // ...
  path.close();
}

This shape is registered under mxConstants.SHAPE_ACTOR in mxCellRenderer.

Summary

Functions
mxActor	Constructs a new actor shape.
paintVertexShape	Redirects to redrawPath for subclasses to work.
redrawPath	Draws the path for this shape.

Functions

mxActor

function mxActor( bounds,
fill,
stroke,
strokewidth )

Constructs a new actor shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

paintVertexShape

mxActor.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Redirects to redrawPath for subclasses to work.

redrawPath

mxActor.prototype.redrawPath = function( c,
x,
y,
w,
h )

Draws the path for this shape.

mxCloud

Extends mxActor to implement a cloud shape.

This shape is registered under mxConstants.SHAPE_CLOUD in mxCellRenderer.

Summary

Functions
mxCloud	Constructs a new cloud shape.
redrawPath	Draws the path for this shape.

Functions

mxCloud

function mxCloud( bounds,
fill,
stroke,
strokewidth )

Constructs a new cloud shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

redrawPath

mxCloud.prototype.redrawPath = function( c,
x,
y,
w,
h )

Draws the path for this shape.

mxRectangleShape

Extends mxShape to implement a rectangle shape. This shape is registered under mxConstants.SHAPE_RECTANGLE in mxCellRenderer.

Summary

Functions
mxRectangleShape	Constructs a new rectangle shape.
isHtmlAllowed	Returns true for non-rounded, non-rotated shapes with no glass gradient.
paintBackground	Generic background painting implementation.
isRoundable	Adds roundable support.
paintForeground	Generic background painting implementation.

Functions

mxRectangleShape

function mxRectangleShape( bounds,
fill,
stroke,
strokewidth )

Constructs a new rectangle shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

isHtmlAllowed

mxRectangleShape.prototype.isHtmlAllowed = function()

Returns true for non-rounded, non-rotated shapes with no glass gradient.

paintBackground

mxRectangleShape.prototype.paintBackground = function( c,
x,
y,
w,
h )

Generic background painting implementation.

isRoundable

mxRectangleShape.prototype.isRoundable = function( c,
x,
y,
w,
h )

Adds roundable support.

paintForeground

mxRectangleShape.prototype.paintForeground = function( c,
x,
y,
w,
h )

Generic background painting implementation.

mxEllipse

Extends mxShape to implement an ellipse shape. This shape is registered under mxConstants.SHAPE_ELLIPSE in mxCellRenderer.

Summary

Functions
mxEllipse	Constructs a new ellipse shape.
paintVertexShape	Paints the ellipse shape.

Functions

mxEllipse

function mxEllipse( bounds,
fill,
stroke,
strokewidth )

Constructs a new ellipse shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

paintVertexShape

mxEllipse.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Paints the ellipse shape.

mxDoubleEllipse

Extends mxShape to implement a double ellipse shape. This shape is registered under mxConstants.SHAPE_DOUBLE_ELLIPSE in mxCellRenderer. Use the following override to only fill the inner ellipse in this shape:

mxDoubleEllipse.prototype.paintVertexShape = function(c, x, y, w, h)
{
  c.ellipse(x, y, w, h);
  c.stroke();

  var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
  x += inset;
  y += inset;
  w -= 2 * inset;
  h -= 2 * inset;

  if (w > 0 && h > 0)
  {
    c.ellipse(x, y, w, h);
  }

  c.fillAndStroke();
};

Summary

Functions
mxDoubleEllipse	Constructs a new ellipse shape.
Variables
vmlScale	Scale for improving the precision of VML rendering.
Functions
paintBackground	Paints the background.
paintForeground	Paints the foreground.
getLabelBounds	Returns the bounds for the label.

Functions

mxDoubleEllipse

function mxDoubleEllipse( bounds,
fill,
stroke,
strokewidth )

Constructs a new ellipse shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

Variables

vmlScale

mxDoubleEllipse.prototype.vmlScale

Scale for improving the precision of VML rendering. Default is 10.

Functions

paintBackground

mxDoubleEllipse.prototype.paintBackground = function( c,
x,
y,
w,
h )

Paints the background.

paintForeground

mxDoubleEllipse.prototype.paintForeground = function( c,
x,
y,
w,
h )

Paints the foreground.

getLabelBounds

mxDoubleEllipse.prototype.getLabelBounds = function( rect )

Returns the bounds for the label.

mxRhombus

Extends mxShape to implement a rhombus (aka diamond) shape. This shape is registered under mxConstants.SHAPE_RHOMBUS in mxCellRenderer.

Summary

Functions
mxRhombus	Constructs a new rhombus shape.
isRoundable	Adds roundable support.
paintVertexShape	Generic painting implementation.

Functions

mxRhombus

function mxRhombus( bounds,
fill,
stroke,
strokewidth )

Constructs a new rhombus shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

isRoundable

mxRhombus.prototype.isRoundable = function()

Adds roundable support.

paintVertexShape

mxRhombus.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Generic painting implementation.

mxPolyline

Extends mxShape to implement a polyline (a line with multiple points). This shape is registered under <mxConstants.SHAPE_POLYLINE> in mxCellRenderer.

Summary

Functions
mxPolyline	Constructs a new polyline shape.
getRotation	Returns 0.
getShapeRotation	Returns 0.
isPaintBoundsInverted	Returns false.
paintEdgeShape	Paints the line shape.
paintLine	Paints the line shape.
paintLine	Paints the line shape.

Functions

mxPolyline

function mxPolyline( points,
stroke,
strokewidth )

Constructs a new polyline shape.

Parameters

points	Array of mxPoints that define the points. This is stored in mxShape.points.
stroke	String that defines the stroke color. Default is ‘black’. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

getRotation

mxPolyline.prototype.getRotation = function()

Returns 0.

getShapeRotation

mxPolyline.prototype.getShapeRotation = function()

Returns 0.

isPaintBoundsInverted

mxPolyline.prototype.isPaintBoundsInverted = function()

Returns false.

paintEdgeShape

mxPolyline.prototype.paintEdgeShape = function( c,
pts )

Paints the line shape.

paintLine

mxPolyline.prototype.paintLine = function( c,
pts,
rounded )

Paints the line shape.

paintLine

Paints the line shape.

mxArrow

Extends mxShape to implement an arrow shape. (The shape is used to represent edges, not vertices.) This shape is registered under mxConstants.SHAPE_ARROW in mxCellRenderer.

Summary

Functions
mxArrow	Constructs a new arrow shape.
augmentBoundingBox	Augments the bounding box with the edge width and markers.
paintEdgeShape	Paints the line shape.

Functions

mxArrow

function mxArrow( points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize )

Constructs a new arrow shape.

Parameters

points	Array of mxPoints that define the points. This is stored in mxShape.points.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.
arrowWidth	Optional integer that defines the arrow width. Default is mxConstants.ARROW_WIDTH. This is stored in <arrowWidth>.
spacing	Optional integer that defines the spacing between the arrow shape and its endpoints. Default is mxConstants.ARROW_SPACING. This is stored in <spacing>.
endSize	Optional integer that defines the size of the arrowhead. Default is mxConstants.ARROW_SIZE. This is stored in <endSize>.

augmentBoundingBox

mxArrow.prototype.augmentBoundingBox = function( bbox )

Augments the bounding box with the edge width and markers.

paintEdgeShape

mxArrow.prototype.paintEdgeShape = function( c,
pts )

Paints the line shape.

mxArrowConnector

Extends mxShape to implement an new rounded arrow shape with support for waypoints and double arrows. (The shape is used to represent edges, not vertices.) This shape is registered under mxConstants.SHAPE_ARROW_CONNECTOR in mxCellRenderer.

Summary

Functions
mxArrowConnector	Constructs a new arrow shape.
Variables
useSvgBoundingBox	Allows to use the SVG bounding box in SVG.
resetStyles	Overrides mxShape to reset spacing.
Functions
augmentBoundingBox	Augments the bounding box with the edge width and markers.
paintEdgeShape	Paints the line shape.
paintEdgeShape	Paints the line shape.
isArrowRounded	Returns wether the arrow is rounded
getStartArrowWidth	Returns the width of the start arrow
getEndArrowWidth	Returns the width of the end arrow
getEdgeWidth	Returns the width of the body of the edge
isOpenEnded	Returns whether the ends of the shape are drawn
isMarkerStart	Returns whether the start marker is drawn
isMarkerEnd	Returns whether the end marker is drawn

Functions

mxArrowConnector

function mxArrowConnector( points,
fill,
stroke,
strokewidth,
arrowWidth,
spacing,
endSize )

Constructs a new arrow shape.

Parameters

points	Array of mxPoints that define the points. This is stored in mxShape.points.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.
arrowWidth	Optional integer that defines the arrow width. Default is mxConstants.ARROW_WIDTH. This is stored in <arrowWidth>.
spacing	Optional integer that defines the spacing between the arrow shape and its endpoints. Default is mxConstants.ARROW_SPACING. This is stored in <spacing>.
endSize	Optional integer that defines the size of the arrowhead. Default is mxConstants.ARROW_SIZE. This is stored in <endSize>.

Variables

useSvgBoundingBox

mxArrowConnector.prototype.useSvgBoundingBox

Allows to use the SVG bounding box in SVG. Default is false for performance reasons.

resetStyles

mxArrowConnector.prototype.resetStyles

Overrides mxShape to reset spacing.

Functions

augmentBoundingBox

mxArrowConnector.prototype.augmentBoundingBox = function( bbox )

Augments the bounding box with the edge width and markers.

paintEdgeShape

mxArrowConnector.prototype.paintEdgeShape = function( c,
pts )

Paints the line shape.

paintEdgeShape

Paints the line shape.

isArrowRounded

mxArrowConnector.prototype.isArrowRounded = function()

Returns wether the arrow is rounded

getStartArrowWidth

mxArrowConnector.prototype.getStartArrowWidth = function()

Returns the width of the start arrow

getEndArrowWidth

mxArrowConnector.prototype.getEndArrowWidth = function()

Returns the width of the end arrow

getEdgeWidth

mxArrowConnector.prototype.getEdgeWidth = function()

Returns the width of the body of the edge

isOpenEnded

mxArrowConnector.prototype.isOpenEnded = function()

Returns whether the ends of the shape are drawn

isMarkerStart

mxArrowConnector.prototype.isMarkerStart = function()

Returns whether the start marker is drawn

isMarkerEnd

mxArrowConnector.prototype.isMarkerEnd = function()

Returns whether the end marker is drawn

mxText

Extends mxShape to implement a text shape. To change vertical text from bottom to top to top to bottom, the following code can be used:

mxText.prototype.verticalTextRotation = 90;

Summary

Functions
mxText	Constructs a new text shape.
Variables
baseSpacingTop	Specifies the spacing to be added to the top spacing.
baseSpacingBottom	Specifies the spacing to be added to the bottom spacing.
baseSpacingLeft	Specifies the spacing to be added to the left spacing.
baseSpacingRight	Specifies the spacing to be added to the right spacing.
replaceLinefeeds	Specifies if linefeeds in HTML labels should be replaced with BR tags.
verticalTextRotation	Rotation for vertical text.
ignoreClippedStringSize	Specifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle.
ignoreStringSize	Specifies if the actual string size should be measured.
textWidthPadding	Specifies the padding to be added to the text width for the bounding box.
lastValue	Contains the last rendered text value.
cacheEnabled	Specifies if caching for HTML labels should be enabled.
Functions
isParseVml	Text shapes do not contain VML markup and do not need to be parsed.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
getSvgScreenOffset	Disables offset in IE9 for crisper image output.
checkBounds	Returns true if the bounds are not null and all of its variables are numeric.
paint	Generic rendering code.
redraw	Renders the text using the given DOM nodes.
resetStyles	Resets all styles.
apply	Extends mxShape to update the text styles.
getAutoDirection	Used to determine the automatic text direction.
updateBoundingBox	Updates the <boundingBox> for this shape using the given node and position.
getShapeRotation	Returns 0 to avoid using rotation in the canvas via updateTransform.
getTextRotation	Returns the rotation for the text label of the corresponding shape.
isPaintBoundsInverted	Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.
configureCanvas	Sets the state of the canvas for drawing the shape.
updateVmlContainer	Sets the width and height of the container to 1px.
redrawHtmlShape	Updates the HTML node(s) to reflect the latest bounds and scale.
updateHtmlTransform	Returns the spacing as an mxPoint.
setInnerHtml	Sets the inner HTML of the given element to the <value>.
updateHtmlFilter	Rotated text rendering quality is bad for IE9 quirks/IE8 standards
updateValue	Updates the HTML node(s) to reflect the latest bounds and scale.
updateFont	Updates the HTML node(s) to reflect the latest bounds and scale.
updateSize	Updates the HTML node(s) to reflect the latest bounds and scale.
getMargin	Returns the spacing as an mxPoint.
getSpacing	Returns the spacing as an mxPoint.

Functions

mxText

function mxText( value,
bounds,
align,
valign,
color,
family,
size,
fontStyle,
spacing,
spacingTop,
spacingRight,
spacingBottom,
spacingLeft,
horizontal,
background,
border,
wrap,
clipped,
overflow,
labelPadding,
textDirection )

Constructs a new text shape.

Parameters

value	String that represents the text to be displayed. This is stored in <value>.
bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
align	Specifies the horizontal alignment. Default is ‘’. This is stored in <align>.
valign	Specifies the vertical alignment. Default is ‘’. This is stored in <valign>.
color	String that specifies the text color. Default is ‘black’. This is stored in <color>.
family	String that specifies the font family. Default is mxConstants.DEFAULT_FONTFAMILY. This is stored in <family>.
size	Integer that specifies the font size. Default is mxConstants.DEFAULT_FONTSIZE. This is stored in <size>.
fontStyle	Specifies the font style. Default is 0. This is stored in <fontStyle>.
spacing	Integer that specifies the global spacing. Default is 2. This is stored in <spacing>.
spacingTop	Integer that specifies the top spacing. Default is 0. The sum of the spacing and this is stored in <spacingTop>.
spacingRight	Integer that specifies the right spacing. Default is 0. The sum of the spacing and this is stored in <spacingRight>.
spacingBottom	Integer that specifies the bottom spacing. Default is 0.The sum of the spacing and this is stored in <spacingBottom>.
spacingLeft	Integer that specifies the left spacing. Default is 0. The sum of the spacing and this is stored in <spacingLeft>.
horizontal	Boolean that specifies if the label is horizontal. Default is true. This is stored in <horizontal>.
background	String that specifies the background color. Default is null. This is stored in <background>.
border	String that specifies the label border color. Default is null. This is stored in <border>.
wrap	Specifies if word-wrapping should be enabled. Default is false. This is stored in <wrap>.
clipped	Specifies if the label should be clipped. Default is false. This is stored in <clipped>.
overflow	Value of the overflow style. Default is ‘visible’.

Variables

baseSpacingTop

mxText.prototype.baseSpacingTop

Specifies the spacing to be added to the top spacing. Default is 0. Use the value 5 here to get the same label positions as in mxGraph 1.x.

baseSpacingBottom

mxText.prototype.baseSpacingBottom

Specifies the spacing to be added to the bottom spacing. Default is 0. Use the value 1 here to get the same label positions as in mxGraph 1.x.

baseSpacingLeft

mxText.prototype.baseSpacingLeft

Specifies the spacing to be added to the left spacing. Default is 0.

baseSpacingRight

mxText.prototype.baseSpacingRight

Specifies the spacing to be added to the right spacing. Default is 0.

replaceLinefeeds

mxText.prototype.replaceLinefeeds

Specifies if linefeeds in HTML labels should be replaced with BR tags. Default is true.

verticalTextRotation

mxText.prototype.verticalTextRotation

Rotation for vertical text. Default is -90 (bottom to top).

ignoreClippedStringSize

mxText.prototype.ignoreClippedStringSize

Specifies if the string size should be measured in updateBoundingBox if the label is clipped and the label position is center and middle. If this is true, then the bounding box will be set to <bounds>. Default is true. ignoreStringSize has precedence over this switch.

ignoreStringSize

mxText.prototype.ignoreStringSize

Specifies if the actual string size should be measured. If disabled the boundingBox will not ignore the actual size of the string, otherwise <bounds> will be used instead. Default is false.

textWidthPadding

mxText.prototype.textWidthPadding

Specifies the padding to be added to the text width for the bounding box. This is needed to make sure no clipping is applied to borders. Default is 4 for IE 8 standards mode and 3 for all others.

lastValue

mxText.prototype.lastValue

Contains the last rendered text value. Used for caching.

cacheEnabled

mxText.prototype.cacheEnabled

Specifies if caching for HTML labels should be enabled. Default is true.

Functions

isParseVml

mxText.prototype.isParseVml = function()

Text shapes do not contain VML markup and do not need to be parsed. This method returns false to speed up rendering in IE8.

isHtmlAllowed

mxText.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape. This implementation returns true if the browser is not in IE8 standards mode.

getSvgScreenOffset

mxText.prototype.getSvgScreenOffset = function()

Disables offset in IE9 for crisper image output.

checkBounds

mxText.prototype.checkBounds = function()

Returns true if the bounds are not null and all of its variables are numeric.

paint

mxText.prototype.paint = function( c,
update )

Generic rendering code.

redraw

mxText.prototype.redraw = function()

Renders the text using the given DOM nodes.

resetStyles

mxText.prototype.resetStyles = function()

Resets all styles.

apply

mxText.prototype.apply = function( state )

Extends mxShape to update the text styles.

Parameters

state

mxCellState of the corresponding cell.

getAutoDirection

mxText.prototype.getAutoDirection = function()

Used to determine the automatic text direction. Returns mxConstants.TEXT_DIRECTION_LTR or mxConstants.TEXT_DIRECTION_RTL depending on the contents of <value>. This is not invoked for HTML, wrapped content or if <value> is a DOM node.

updateBoundingBox

mxText.prototype.updateBoundingBox = function()

Updates the <boundingBox> for this shape using the given node and position.

getShapeRotation

mxText.prototype.getShapeRotation = function()

Returns 0 to avoid using rotation in the canvas via updateTransform.

getTextRotation

mxText.prototype.getTextRotation = function()

Returns the rotation for the text label of the corresponding shape.

isPaintBoundsInverted

mxText.prototype.isPaintBoundsInverted = function()

Inverts the bounds if <mxShape.isBoundsInverted> returns true or if the horizontal style is false.

configureCanvas

mxText.prototype.configureCanvas = function( c,
x,
y,
w,
h )

Sets the state of the canvas for drawing the shape.

updateVmlContainer

mxText.prototype.updateVmlContainer = function()

Sets the width and height of the container to 1px.

redrawHtmlShape

mxText.prototype.redrawHtmlShape = function()

Updates the HTML node(s) to reflect the latest bounds and scale.

updateHtmlTransform

mxText.prototype.updateHtmlTransform = function()

Returns the spacing as an mxPoint.

setInnerHtml

Sets the inner HTML of the given element to the <value>.

updateHtmlFilter

mxText.prototype.updateHtmlFilter = function()

Rotated text rendering quality is bad for IE9 quirks/IE8 standards

updateValue

mxText.prototype.updateValue = function()

Updates the HTML node(s) to reflect the latest bounds and scale.

updateFont

mxText.prototype.updateFont = function( node )

Updates the HTML node(s) to reflect the latest bounds and scale.

updateSize

mxText.prototype.updateSize = function( node,
enableWrap )

Updates the HTML node(s) to reflect the latest bounds and scale.

getMargin

Returns the spacing as an mxPoint.

getSpacing

mxText.prototype.getSpacing = function()

Returns the spacing as an mxPoint.

mxTriangle

Implementation of the triangle shape.

Summary

Functions
mxTriangle	Constructs a new triangle shape.
isRoundable	Adds roundable support.
redrawPath	Draws the path for this shape.

Functions

mxTriangle

function mxTriangle()

Constructs a new triangle shape.

isRoundable

mxTriangle.prototype.isRoundable = function()

Adds roundable support.

redrawPath

mxTriangle.prototype.redrawPath = function( c,
x,
y,
w,
h )

Draws the path for this shape.

mxHexagon

Implementation of the hexagon shape.

Summary

Functions
mxHexagon	Constructs a new hexagon shape.
redrawPath	Draws the path for this shape.

Functions

mxHexagon

function mxHexagon()

Constructs a new hexagon shape.

redrawPath

mxHexagon.prototype.redrawPath = function( c,
x,
y,
w,
h )

Draws the path for this shape.

mxLine

Extends mxShape to implement a horizontal line shape. This shape is registered under mxConstants.SHAPE_LINE in mxCellRenderer.

Summary

Functions
mxLine	Constructs a new line shape.
paintVertexShape	Redirects to redrawPath for subclasses to work.

Functions

mxLine

function mxLine( bounds,
stroke,
strokewidth )

Constructs a new line shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
stroke	String that defines the stroke color. Default is ‘black’. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

paintVertexShape

mxLine.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Redirects to redrawPath for subclasses to work.

mxImageShape

Extends mxShape to implement an image shape. This shape is registered under mxConstants.SHAPE_IMAGE in mxCellRenderer.

Summary

Functions
mxImageShape	Constructs a new image shape.
Variables
preserveImageAspect	Switch to preserve image aspect.
Functions
getSvgScreenOffset	Disables offset in IE9 for crisper image output.
apply	Overrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.
isHtmlAllowed	Returns true if HTML is allowed for this shape.
createHtml	Creates and returns the HTML DOM node(s) to represent this shape.
isRoundable	Disables inherited roundable support.
paintVertexShape	Generic background painting implementation.
redraw	Overrides mxShape.redraw to preserve the aspect ratio of images.

Functions

mxImageShape

function mxImageShape( bounds,
image,
fill,
stroke,
strokewidth )

Constructs a new image shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
image	String that specifies the URL of the image. This is stored in <image>.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 0. This is stored in <strokewidth>.

Variables

preserveImageAspect

mxImageShape.prototype.preserveImageAspect

Switch to preserve image aspect. Default is true.

Functions

getSvgScreenOffset

mxImageShape.prototype.getSvgScreenOffset = function()

Disables offset in IE9 for crisper image output.

apply

mxImageShape.prototype.apply = function( state )

Overrides mxShape.apply to replace the fill and stroke colors with the respective values from mxConstants.STYLE_IMAGE_BACKGROUND and mxConstants.STYLE_IMAGE_BORDER.

Applies the style of the given mxCellState to the shape. This implementation assigns the following styles to local fields:

mxConstants.STYLE_IMAGE_BACKGROUND => fill
mxConstants.STYLE_IMAGE_BORDER => stroke

Parameters

state

mxCellState of the corresponding cell.

isHtmlAllowed

mxImageShape.prototype.isHtmlAllowed = function()

Returns true if HTML is allowed for this shape. This implementation always returns false.

createHtml

mxImageShape.prototype.createHtml = function()

Creates and returns the HTML DOM node(s) to represent this shape. This implementation falls back to <createVml> so that the HTML creation is optional.

isRoundable

mxImageShape.prototype.isRoundable = function( c,
x,
y,
w,
h )

Disables inherited roundable support.

paintVertexShape

mxImageShape.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Generic background painting implementation.

redraw

mxImageShape.prototype.redrawHtmlShape = function()

Overrides mxShape.redraw to preserve the aspect ratio of images.

mxLabel

Extends mxShape to implement an image shape with a label. This shape is registered under mxConstants.SHAPE_LABEL in mxCellRenderer.

Summary

Functions
mxLabel	Constructs a new label shape.
Variables
imageSize	Default width and height for the image.
spacing	Default value for image spacing.
indicatorSize	Default width and height for the indicicator.
indicatorSpacing	Default spacing between image and indicator.
Functions
init	Initializes the shape and the <indicator>.
redraw	Reconfigures this shape.
isHtmlAllowed	Returns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.
paintForeground	Generic background painting implementation.
paintImage	Generic background painting implementation.
getImageBounds	Generic background painting implementation.
paintIndicator	Generic background painting implementation.
getIndicatorBounds	Generic background painting implementation.
redrawHtmlShape	Generic background painting implementation.

Functions

mxLabel

function mxLabel( bounds,
fill,
stroke,
strokewidth )

Constructs a new label shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

Variables

imageSize

mxLabel.prototype.imageSize

Default width and height for the image. Default is mxConstants.DEFAULT_IMAGESIZE.

spacing

mxLabel.prototype.spacing

Default value for image spacing. Default is 2.

indicatorSize

mxLabel.prototype.indicatorSize

Default width and height for the indicicator. Default is 10.

indicatorSpacing

mxLabel.prototype.indicatorSpacing

Default spacing between image and indicator. Default is 2.

Functions

init

mxLabel.prototype.init = function( container )

Initializes the shape and the <indicator>.

redraw

mxLabel.prototype.redraw = function()

Reconfigures this shape. This will update the colors of the indicator and reconfigure it if required.

isHtmlAllowed

mxLabel.prototype.isHtmlAllowed = function()

Returns true for non-rounded, non-rotated shapes with no glass gradient and no indicator shape.

paintForeground

mxLabel.prototype.paintForeground = function( c,
x,
y,
w,
h )

Generic background painting implementation.

paintImage

mxLabel.prototype.paintImage = function( c,
x,
y,
w,
h )

Generic background painting implementation.

getImageBounds

mxLabel.prototype.getImageBounds = function( x,
y,
w,
h )

Generic background painting implementation.

paintIndicator

mxLabel.prototype.paintIndicator = function( c,
x,
y,
w,
h )

Generic background painting implementation.

getIndicatorBounds

mxLabel.prototype.getIndicatorBounds = function( x,
y,
w,
h )

Generic background painting implementation.

redrawHtmlShape

mxLabel.prototype.redrawHtmlShape = function()

Generic background painting implementation.

mxCylinder

Extends mxShape to implement an cylinder shape. If a custom shape with one filled area and an overlay path is needed, then this shape’s redrawPath should be overridden. This shape is registered under mxConstants.SHAPE_CYLINDER in mxCellRenderer.

Summary

Functions
mxCylinder	Constructs a new cylinder shape.
Variables
maxHeight	Defines the maximum height of the top and bottom part of the cylinder shape.
svgStrokeTolerance	Sets stroke tolerance to 0 for SVG.
Functions
paintVertexShape	Redirects to redrawPath for subclasses to work.
redrawPath	Draws the path for this shape.
redrawPath	Draws the path for this shape.

Functions

mxCylinder

function mxCylinder( bounds,
fill,
stroke,
strokewidth )

Constructs a new cylinder shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

Variables

maxHeight

mxCylinder.prototype.maxHeight

Defines the maximum height of the top and bottom part of the cylinder shape.

svgStrokeTolerance

mxCylinder.prototype.svgStrokeTolerance

Sets stroke tolerance to 0 for SVG.

Functions

paintVertexShape

mxCylinder.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Redirects to redrawPath for subclasses to work.

redrawPath

Draws the path for this shape.

redrawPath

mxCylinder.prototype.redrawPath = function( c,
x,
y,
w,
h,
isForeground )

Draws the path for this shape.

mxConnector

Extends mxShape to implement a connector shape. The connector shape allows for arrow heads on either side.

This shape is registered under mxConstants.SHAPE_CONNECTOR in mxCellRenderer.

Summary

Functions
mxConnector	Constructs a new connector shape.
updateBoundingBox	Updates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.
paintEdgeShape	Paints the line shape.
createMarker	Prepares the marker by adding offsets in pts and returning a function to paint the marker.
augmentBoundingBox	Augments the bounding box with the strokewidth and shadow offsets.

Functions

mxConnector

function mxConnector( points,
stroke,
strokewidth )

Constructs a new connector shape.

Parameters

points	Array of mxPoints that define the points. This is stored in mxShape.points.
stroke	String that defines the stroke color. This is stored in <stroke>. Default is ‘black’.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

updateBoundingBox

mxConnector.prototype.updateBoundingBox = function()

Updates the <boundingBox> for this shape using <createBoundingBox> and augmentBoundingBox and stores the result in <boundingBox>.

paintEdgeShape

mxConnector.prototype.paintEdgeShape = function( c,
pts )

Paints the line shape.

createMarker

mxConnector.prototype.createMarker = function( c,
pts,
source )

Prepares the marker by adding offsets in pts and returning a function to paint the marker.

augmentBoundingBox

mxConnector.prototype.augmentBoundingBox = function( bbox )

Augments the bounding box with the strokewidth and shadow offsets.

mxSwimlane

Extends mxShape to implement a swimlane shape. This shape is registered under mxConstants.SHAPE_SWIMLANE in mxCellRenderer. Use the <mxConstants.STYLE_STYLE_STARTSIZE> to define the size of the title region, mxConstants.STYLE_SWIMLANE_FILLCOLOR for the content area fill, mxConstants.STYLE_SEPARATORCOLOR to draw an additional vertical separator and mxConstants.STYLE_SWIMLANE_LINE to hide the line between the title region and the content area. The mxConstants.STYLE_HORIZONTAL affects the orientation of this shape, not only its label.

Summary

Functions
mxSwimlane	Constructs a new swimlane shape.
Variables
imageSize	Default imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style.
Functions
isRoundable	Adds roundable support.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getGradientBounds	Returns the bounding box for the gradient box for this shape.
getArcSize	Returns the arcsize for the swimlane.
paintVertexShape	Paints the swimlane vertex shape.
paintVertexShape	Paints the swimlane vertex shape.
paintSwimlane	Paints the swimlane vertex shape.
paintRoundedSwimlane	Paints the swimlane vertex shape.
paintDivider	Paints the divider between swimlane title and content area.
paintSeparator	Paints the vertical or horizontal separator line between swimlanes.
getImageBounds	Paints the swimlane vertex shape.

Functions

mxSwimlane

function mxSwimlane( bounds,
fill,
stroke,
strokewidth )

Constructs a new swimlane shape.

Parameters

bounds	mxRectangle that defines the bounds. This is stored in mxShape.bounds.
fill	String that defines the fill color. This is stored in <fill>.
stroke	String that defines the stroke color. This is stored in <stroke>.
strokewidth	Optional integer that defines the stroke width. Default is 1. This is stored in <strokewidth>.

Variables

imageSize

mxSwimlane.prototype.imageSize

Default imagewidth and imageheight if an image but no imagewidth and imageheight are defined in the style. Value is 16.

Functions

isRoundable

mxSwimlane.prototype.isRoundable = function( c,
x,
y,
w,
h )

Adds roundable support.

getGradientBounds

Returns the bounding box for the gradient box for this shape.

getGradientBounds

Returns the bounding box for the gradient box for this shape.

getGradientBounds

mxSwimlane.prototype.getGradientBounds = function( c,
x,
y,
w,
h )

Returns the bounding box for the gradient box for this shape.

getArcSize

mxSwimlane.prototype.getArcSize = function( w,
h,
start )

Returns the arcsize for the swimlane.

paintVertexShape

Paints the swimlane vertex shape.

paintVertexShape

mxSwimlane.prototype.paintVertexShape = function( c,
x,
y,
w,
h )

Paints the swimlane vertex shape.

paintSwimlane

mxSwimlane.prototype.paintSwimlane = function( c,
x,
y,
w,
h,
start,
fill,
swimlaneLine )

Paints the swimlane vertex shape.

paintRoundedSwimlane

mxSwimlane.prototype.paintRoundedSwimlane = function( c,
x,
y,
w,
h,
start,
r,
fill,
swimlaneLine )

Paints the swimlane vertex shape.

paintDivider

mxSwimlane.prototype.paintDivider = function( c,
x,
y,
w,
h,
start,
shadow )

Paints the divider between swimlane title and content area.

paintSeparator

mxSwimlane.prototype.paintSeparator = function( c,
x,
y,
w,
h,
start,
color )

Paints the vertical or horizontal separator line between swimlanes.

getImageBounds

mxSwimlane.prototype.getImageBounds = function( x,
y,
w,
h )

Paints the swimlane vertex shape.

mxGraphLayout

Base class for all layout algorithms in mxGraph. Main public functions are <move> for handling a moved cell within a layouted parent, and execute for running the layout on a given parent cell.

Known Subclasses

mxCircleLayout, mxCompactTreeLayout, mxCompositeLayout, mxFastOrganicLayout, mxParallelEdgeLayout, mxPartitionLayout, mxStackLayout

Summary

Functions
mxGraphLayout	Constructs a new layout using the given layouts.
Variables
graph	Reference to the enclosing mxGraph.
useBoundingBox	Boolean indicating if the bounding box of the label should be used if its available.
parent	The parent cell of the layout, if any
Functions
moveCell	Notified when a cell is being moved in a parent that has automatic layout to update the cell state (eg.
execute	Executes the layout algorithm for the children of the given parent.
getGraph	Returns the graph that this layout operates on.
getConstraint	Returns the constraint for the given key and cell.
traverse	Traverses the (directed) graph invoking the given function for each visited vertex and edge.
isAncestor	Returns true if the given parent is an ancestor of the given child.
isVertexMovable	Returns a boolean indicating if the given mxCell is movable or bendable by the algorithm.
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
isEdgeIgnored	Returns a boolean indicating if the given mxCell should be ignored by the algorithm.
setEdgeStyleEnabled	Disables or enables the edge style of the given edge.
setOrthogonalEdge	Disables or enables orthogonal end segments of the given edge.
getParentOffset	Determines the offset of the given parent to the parent of the layout
setEdgePoints	Replaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.
setVertexLocation	Sets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true.
getVertexBounds	Returns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.
arrangeGroups	Shortcut to mxGraph.updateGroupBounds with moveGroup set to true.

Functions

mxGraphLayout

function mxGraphLayout( graph )

Constructs a new layout using the given layouts.

Arguments

graph

Enclosing

Variables

graph

mxGraphLayout.prototype.graph

Reference to the enclosing mxGraph.

useBoundingBox

mxGraphLayout.prototype.useBoundingBox

Boolean indicating if the bounding box of the label should be used if its available. Default is true.

parent

mxGraphLayout.prototype.parent

The parent cell of the layout, if any

Functions

moveCell

mxGraphLayout.prototype.moveCell = function( cell,
x,
y )

Notified when a cell is being moved in a parent that has automatic layout to update the cell state (eg. index) so that the outcome of the layout will position the vertex as close to the point (x, y) as possible.

Empty implementation.

Parameters

cell	mxCell which has been moved.
x	X-coordinate of the new cell location.
y	Y-coordinate of the new cell location.

execute

mxGraphLayout.prototype.execute = function( parent )

Executes the layout algorithm for the children of the given parent.

Parameters

parent

mxCell whose children should be layed out.

getGraph

mxGraphLayout.prototype.getGraph = function()

Returns the graph that this layout operates on.

getConstraint

mxGraphLayout.prototype.getConstraint = function( key,
cell,
edge,
source )

Returns the constraint for the given key and cell. The optional edge and source arguments are used to return inbound and outgoing routing- constraints for the given edge and vertex. This implementation always returns the value for the given key in the style of the given cell.

Parameters

key	Key of the constraint to be returned.
cell	mxCell whose constraint should be returned.
edge	Optional mxCell that represents the connection whose constraint should be returned. Default is null.
source	Optional boolean that specifies if the connection is incoming or outgoing. Default is null.

traverse

mxGraphLayout.traverse = function( vertex,
directed,
func,
edge,
visited )

Traverses the (directed) graph invoking the given function for each visited vertex and edge. The function is invoked with the current vertex and the incoming edge as a parameter. This implementation makes sure each vertex is only visited once. The function may return false if the traversal should stop at the given vertex.

Example

mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
  mxLog.debug(graph.getLabel(vertex));
});

Parameters

vertex	mxCell that represents the vertex where the traversal starts.
directed	Optional boolean indicating if edges should only be traversed from source to target. Default is true.
func	Visitor function that takes the current vertex and the incoming edge as arguments. The traversal stops if the function returns false.
edge	Optional mxCell that represents the incoming edge. This is null for the first step of the traversal.
visited	Optional mxDictionary of cell paths for the visited cells.

isAncestor

mxGraphLayout.prototype.isAncestor = function( parent,
child,
traverseAncestors )

Returns true if the given parent is an ancestor of the given child.

Parameters

parent	mxCell that specifies the parent.
child	mxCell that specifies the child.
traverseAncestors	boolean whether to

isVertexMovable

mxGraphLayout.prototype.isVertexMovable = function( cell )

Returns a boolean indicating if the given mxCell is movable or bendable by the algorithm. This implementation returns true if the given cell is movable in the graph.

Parameters

cell	mxCell whose movable state should be returned.

isVertexIgnored

mxGraphLayout.prototype.isVertexIgnored = function( vertex )

Returns a boolean indicating if the given mxCell should be ignored by the algorithm. This implementation returns false for all vertices.

Parameters

vertex

mxCell whose ignored state should be returned.

isEdgeIgnored

mxGraphLayout.prototype.isEdgeIgnored = function( edge )

Returns a boolean indicating if the given mxCell should be ignored by the algorithm. This implementation returns false for all vertices.

Parameters

cell	mxCell whose ignored state should be returned.

setEdgeStyleEnabled

mxGraphLayout.prototype.setEdgeStyleEnabled = function( edge,
value )

Disables or enables the edge style of the given edge.

setOrthogonalEdge

mxGraphLayout.prototype.setOrthogonalEdge = function( edge,
value )

Disables or enables orthogonal end segments of the given edge.

getParentOffset

mxGraphLayout.prototype.getParentOffset = function( parent )

Determines the offset of the given parent to the parent of the layout

setEdgePoints

mxGraphLayout.prototype.setEdgePoints = function( edge,
points )

Replaces the array of mxPoints in the geometry of the given edge with the given array of mxPoints.

setVertexLocation

mxGraphLayout.prototype.setVertexLocation = function( cell,
x,
y )

Sets the new position of the given cell taking into account the size of the bounding box if useBoundingBox is true. The change is only carried out if the new location is not equal to the existing location, otherwise the geometry is not replaced with an updated instance. The new or old bounds are returned (including overlapping labels).

Parameters

cell	mxCell whose geometry is to be set.
x	Integer that defines the x-coordinate of the new location.
y	Integer that defines the y-coordinate of the new location.

getVertexBounds

mxGraphLayout.prototype.getVertexBounds = function( cell )

Returns an mxRectangle that defines the bounds of the given cell or the bounding box if useBoundingBox is true.

arrangeGroups

mxGraphLayout.prototype.arrangeGroups = function( cells,
border,
topBorder,
rightBorder,
bottomBorder,
leftBorder )

Shortcut to mxGraph.updateGroupBounds with moveGroup set to true.

WeightedCellSorter

A utility class used to track cells whilst sorting occurs on the weighted sum of their connected edges. Does not violate (x.compareTo(y)==0) == (x.equals(y))

Summary

Functions
WeightedCellSorter	Constructs a new weighted cell sorted for the given cell and weight.
Variables
weightedValue	The weighted value of the cell stored.
nudge	Whether or not to flip equal weight values.
visited	Whether or not this cell has been visited in the current assignment.
rankIndex	The index this cell is in the model rank.
cell	The cell whose median value is being calculated.
Functions
compare	Compares two WeightedCellSorters.

Functions

WeightedCellSorter

function WeightedCellSorter( cell,
weightedValue )

Constructs a new weighted cell sorted for the given cell and weight.

Variables

weightedValue

WeightedCellSorter.prototype.weightedValue

The weighted value of the cell stored.

nudge

WeightedCellSorter.prototype.nudge

Whether or not to flip equal weight values.

visited

WeightedCellSorter.prototype.visited

Whether or not this cell has been visited in the current assignment.

rankIndex

WeightedCellSorter.prototype.rankIndex

The index this cell is in the model rank.

cell

WeightedCellSorter.prototype.cell

The cell whose median value is being calculated.

Functions

compare

WeightedCellSorter.prototype.compare = function( a,
b )

Compares two WeightedCellSorters.

mxStackLayout

Extends mxGraphLayout to create a horizontal or vertical stack of the child vertices. The children do not need to be connected for this layout to work.

Example

var layout = new mxStackLayout(graph, true);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxStackLayout	Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontal	Specifies the orientation of the layout.
spacing	Specifies the spacing between the cells.
x0	Specifies the horizontal origin of the layout.
y0	Specifies the vertical origin of the layout.
border	Border to be added if fill is true.
marginTop	Top margin for the child area.
marginLeft	Top margin for the child area.
marginRight	Top margin for the child area.
marginBottom	Top margin for the child area.
keepFirstLocation	Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.
fill	Boolean indicating if dimension should be changed to fill out the parent cell.
resizeParent	If the parent should be resized to match the width/height of the stack.
resizeParentMax	Use maximum of existing value and new value for resize of parent.
resizeLast	If the last element should be resized to fill out the parent.
wrap	Value at which a new column or row should be created.
borderCollapse	If the strokeWidth should be ignored.
allowGaps	If gaps should be allowed in the stack.
gridSize	Grid size for alignment of position and size.
Functions
isHorizontal	Returns horizontal.
moveCell	Implements mxGraphLayout.moveCell.
getParentSize	Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.
getLayoutCells	Returns the cells to be layouted.
snap	Snaps the given value to the grid size.
execute	Implements mxGraphLayout.execute.
execute	Implements mxGraphLayout.execute.
execute	Implements mxGraphLayout.execute.

Functions

mxStackLayout

function mxStackLayout( graph,
horizontal,
spacing,
x0,
y0,
border )

Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.

Variables

horizontal

mxStackLayout.prototype.horizontal

Specifies the orientation of the layout. Default is true.

spacing

mxStackLayout.prototype.spacing

Specifies the spacing between the cells. Default is 0.

x0

mxStackLayout.prototype.x0

Specifies the horizontal origin of the layout. Default is 0.

y0

mxStackLayout.prototype.y0

Specifies the vertical origin of the layout. Default is 0.

border

mxStackLayout.prototype.border

Border to be added if fill is true. Default is 0.

marginTop

mxStackLayout.prototype.marginTop

Top margin for the child area. Default is 0.

marginLeft

mxStackLayout.prototype.marginLeft

Top margin for the child area. Default is 0.

marginRight

mxStackLayout.prototype.marginRight

Top margin for the child area. Default is 0.

marginBottom

mxStackLayout.prototype.marginBottom

Top margin for the child area. Default is 0.

keepFirstLocation

mxStackLayout.prototype.keepFirstLocation

Boolean indicating if the location of the first cell should be kept, that is, it will not be moved to x0 or y0.

fill

mxStackLayout.prototype.fill

Boolean indicating if dimension should be changed to fill out the parent cell. Default is false.

resizeParent

mxStackLayout.prototype.resizeParent

If the parent should be resized to match the width/height of the stack. Default is false.

resizeParentMax

mxStackLayout.prototype.resizeParentMax

Use maximum of existing value and new value for resize of parent. Default is false.

resizeLast

mxStackLayout.prototype.resizeLast

If the last element should be resized to fill out the parent. Default is false. If resizeParent is true then this is ignored.

wrap

mxStackLayout.prototype.wrap

Value at which a new column or row should be created. Default is null.

borderCollapse

mxStackLayout.prototype.borderCollapse

If the strokeWidth should be ignored. Default is true.

allowGaps

mxStackLayout.prototype.allowGaps

If gaps should be allowed in the stack. Default is false.

gridSize

mxStackLayout.prototype.gridSize

Grid size for alignment of position and size. Default is 0.

Functions

isHorizontal

mxStackLayout.prototype.isHorizontal = function()

Returns horizontal.

moveCell

mxStackLayout.prototype.moveCell = function( cell,
x,
y )

Implements mxGraphLayout.moveCell.

getParentSize

mxStackLayout.prototype.getParentSize = function( parent )

Returns the size for the parent container or the size of the graph container if the parent is a layer or the root of the model.

getLayoutCells

mxStackLayout.prototype.getLayoutCells = function( parent )

Returns the cells to be layouted.

snap

mxStackLayout.prototype.snap = function( value )

Snaps the given value to the grid size.

execute

mxStackLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

execute

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

execute

Implements mxGraphLayout.execute.

Only children where <isVertexIgnored> returns false are taken into account.

mxPartitionLayout

Extends mxGraphLayout for partitioning the parent cell vertically or horizontally by filling the complete area with the child cells. A horizontal layout partitions the height of the given parent whereas a a non-horizontal layout partitions the width. If the parent is a layer (that is, a child of the root node), then the current graph size is partitioned. The children do not need to be connected for this layout to work.

Example

var layout = new mxPartitionLayout(graph, true, 10, 20);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxPartitionLayout	Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.
Variables
horizontal	Boolean indicating the direction in which the space is partitioned.
spacing	Integer that specifies the absolute spacing in pixels between the children.
border	Integer that specifies the absolute inset in pixels for the parent that contains the children.
resizeVertices	Boolean that specifies if vertices should be resized.
Functions
isHorizontal	Returns horizontal.
moveCell	Implements mxGraphLayout.moveCell.
execute	Implements mxGraphLayout.execute.

Functions

mxPartitionLayout

function mxPartitionLayout( graph,
horizontal,
spacing,
border )

Constructs a new stack layout layout for the specified graph, spacing, orientation and offset.

Variables

horizontal

mxPartitionLayout.prototype.horizontal

Boolean indicating the direction in which the space is partitioned. Default is true.

spacing

mxPartitionLayout.prototype.spacing

Integer that specifies the absolute spacing in pixels between the children. Default is 0.

border

mxPartitionLayout.prototype.border

Integer that specifies the absolute inset in pixels for the parent that contains the children. Default is 0.

resizeVertices

mxPartitionLayout.prototype.resizeVertices

Boolean that specifies if vertices should be resized. Default is true.

Functions

isHorizontal

mxPartitionLayout.prototype.isHorizontal = function()

Returns horizontal.

moveCell

mxPartitionLayout.prototype.moveCell = function( cell,
x,
y )

Implements mxGraphLayout.moveCell.

execute

mxPartitionLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute. All children where <isVertexIgnored> returns false and <isVertexMovable> returns true are modified.

mxCompactTreeLayout

Extends mxGraphLayout to implement a compact tree (Moen) algorithm. This layout is suitable for graphs that have no cycles (trees). Vertices that are not connected to the tree will be ignored by this layout.

Example

var layout = new mxCompactTreeLayout(graph);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxCompactTreeLayout	Constructs a new compact tree layout for the specified graph and orientation.
Variables
horizontal	Specifies the orientation of the layout.
invert	Specifies if edge directions should be inverted.
resizeParent	If the parents should be resized to match the width/height of the children.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
groupPadding	Padding added to resized parents.
groupPaddingTop	Top padding added to resized parents.
groupPaddingRight	Right padding added to resized parents.
groupPaddingBottom	Bottom padding added to resized parents.
groupPaddingLeft	Left padding added to resized parents.
parentsChanged	A set of the parents that need updating based on children process as part of the layout.
moveTree	Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
visited	Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer.
levelDistance	Holds the levelDistance.
nodeDistance	Holds the nodeDistance.
resetEdges	Specifies if all edge points of traversed edges should be removed.
prefHozEdgeSep	The preferred horizontal distance between edges exiting a vertex.
prefVertEdgeOff	The preferred vertical offset between edges exiting a vertex.
minEdgeJetty	The minimum distance for an edge jetty from a vertex.
channelBuffer	The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.
edgeRouting	Whether or not to apply the internal tree edge routing.
sortEdges	Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
alignRanks	Whether or not the tops of cells in each rank should be aligned across the rank
maxRankHeight	An array of the maximum height of cells (relative to the layout direction) per rank
root	The cell to use as the root of the tree
node	The internal node representation of the root cell.
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
isHorizontal	Returns horizontal.
execute	Implements mxGraphLayout.execute.
moveNode	Moves the specified node and all of its children by the given amount.
sortOutgoingEdges	Called if sortEdges is true to sort the array of outgoing edges in place.
findRankHeights	Stores the maximum height (relative to the layout direction) of cells in each rank
setCellHeights	Set the cells heights (relative to the layout direction) when the tops of each rank are to be aligned
dfs	Does a depth first search starting at the specified cell.
layout	Starts the actual compact tree layout algorithm at the given node.
horizontalLayout
verticalLayout
attachParent
layoutLeaf
join
merge
offset
bridge
createNode
apply
createLine
adjustParents	Adjust parent cells whose child geometries have changed.
localEdgeProcessing	Moves the specified node and all of its children by the given amount.
localEdgeProcessing	Separates the x position of edges as they connect to vertices

Functions

mxCompactTreeLayout

function mxCompactTreeLayout( graph,
horizontal,
invert )

Constructs a new compact tree layout for the specified graph and orientation.

Variables

horizontal

mxCompactTreeLayout.prototype.horizontal

Specifies the orientation of the layout. Default is true.

invert

mxCompactTreeLayout.prototype.invert

Specifies if edge directions should be inverted. Default is false.

resizeParent

mxCompactTreeLayout.prototype.resizeParent

If the parents should be resized to match the width/height of the children. Default is true.

maintainParentLocation

mxCompactTreeLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout. Default is false for backwards compatibility.

groupPadding

mxCompactTreeLayout.prototype.groupPadding

Padding added to resized parents. Default is 10.

groupPaddingTop

mxCompactTreeLayout.prototype.groupPaddingTop

Top padding added to resized parents. Default is 0.

groupPaddingRight

mxCompactTreeLayout.prototype.groupPaddingRight

Right padding added to resized parents. Default is 0.

groupPaddingBottom

mxCompactTreeLayout.prototype.groupPaddingBottom

Bottom padding added to resized parents. Default is 0.

groupPaddingLeft

mxCompactTreeLayout.prototype.groupPaddingLeft

Left padding added to resized parents. Default is 0.

parentsChanged

mxCompactTreeLayout.prototype.parentsChanged

A set of the parents that need updating based on children process as part of the layout.

moveTree

mxCompactTreeLayout.prototype.moveTree

Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer. Default is false.

visited

mxCompactTreeLayout.prototype.visited

Specifies if the tree should be moved to the top, left corner if it is inside a top-level layer. Default is false.

levelDistance

mxCompactTreeLayout.prototype.levelDistance

Holds the levelDistance. Default is 10.

nodeDistance

mxCompactTreeLayout.prototype.nodeDistance

Holds the nodeDistance. Default is 20.

resetEdges

mxCompactTreeLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed. Default is true.

prefHozEdgeSep

mxCompactTreeLayout.prototype.prefHozEdgeSep

The preferred horizontal distance between edges exiting a vertex.

prefVertEdgeOff

mxCompactTreeLayout.prototype.prefVertEdgeOff

The preferred vertical offset between edges exiting a vertex.

minEdgeJetty

mxCompactTreeLayout.prototype.minEdgeJetty

The minimum distance for an edge jetty from a vertex.

channelBuffer

mxCompactTreeLayout.prototype.channelBuffer

The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed.

edgeRouting

mxCompactTreeLayout.prototype.edgeRouting

Whether or not to apply the internal tree edge routing.

sortEdges

mxCompactTreeLayout.prototype.sortEdges

Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.

alignRanks

mxCompactTreeLayout.prototype.alignRanks

Whether or not the tops of cells in each rank should be aligned across the rank

maxRankHeight

mxCompactTreeLayout.prototype.maxRankHeight

An array of the maximum height of cells (relative to the layout direction) per rank

root

mxCompactTreeLayout.prototype.root

The cell to use as the root of the tree

node

mxCompactTreeLayout.prototype.node

The internal node representation of the root cell. Do not set directly , this value is only exposed to assist with post-processing functionality

Functions

isVertexIgnored

mxCompactTreeLayout.prototype.isVertexIgnored = function( vertex )

Returns a boolean indicating if the given mxCell should be ignored as a vertex. This returns true if the cell has no connections.

Parameters

vertex

mxCell whose ignored state should be returned.

isHorizontal

mxCompactTreeLayout.prototype.isHorizontal = function()

Returns horizontal.

execute

mxCompactTreeLayout.prototype.execute = function( parent,
root )

Implements mxGraphLayout.execute.

If the parent has any connected edges, then it is used as the root of the tree. Else, mxGraph.findTreeRoots will be used to find a suitable root node within the set of children of the given parent.

Parameters

parent	mxCell whose children should be laid out.
root	Optional mxCell that will be used as the root of the tree. Overrides root if specified.

moveNode

mxCompactTreeLayout.prototype.moveNode = function( node,
dx,
dy )

Moves the specified node and all of its children by the given amount.

sortOutgoingEdges

mxCompactTreeLayout.prototype.sortOutgoingEdges = function( source,
edges )

Called if sortEdges is true to sort the array of outgoing edges in place.

findRankHeights

mxCompactTreeLayout.prototype.findRankHeights = function( node,
rank )

Stores the maximum height (relative to the layout direction) of cells in each rank

setCellHeights

mxCompactTreeLayout.prototype.setCellHeights = function( node,
rank )

Set the cells heights (relative to the layout direction) when the tops of each rank are to be aligned

dfs

mxCompactTreeLayout.prototype.dfs = function( cell,
parent )

Does a depth first search starting at the specified cell. Makes sure the specified parent is never left by the algorithm.

layout

mxCompactTreeLayout.prototype.layout = function( node )

Starts the actual compact tree layout algorithm at the given node.

horizontalLayout

mxCompactTreeLayout.prototype.horizontalLayout = function( node,
x0,
y0,
bounds )

verticalLayout

mxCompactTreeLayout.prototype.verticalLayout = function( node,
parent,
x0,
y0,
bounds )

attachParent

mxCompactTreeLayout.prototype.attachParent = function( node,
height )

layoutLeaf

mxCompactTreeLayout.prototype.layoutLeaf = function( node )

join

mxCompactTreeLayout.prototype.join = function( node )

merge

mxCompactTreeLayout.prototype.merge = function( p1,
p2 )

offset

mxCompactTreeLayout.prototype.offset = function( p1,
p2,
a1,
a2,
b1,
b2 )

bridge

mxCompactTreeLayout.prototype.bridge = function( line1,
x1,
y1,
line2,
x2,
y2 )

createNode

mxCompactTreeLayout.prototype.createNode = function( cell )

apply

mxCompactTreeLayout.prototype.apply = function( node,
bounds )

createLine

mxCompactTreeLayout.prototype.createLine = function( dx,
dy,
next )

adjustParents

mxCompactTreeLayout.prototype.adjustParents = function()

Adjust parent cells whose child geometries have changed. The default implementation adjusts the group to just fit around the children with a padding.

localEdgeProcessing

mxCompactTreeLayout.prototype.localEdgeProcessing = function( node )

Moves the specified node and all of its children by the given amount.

localEdgeProcessing

Separates the x position of edges as they connect to vertices

mxRadialTreeLayout

Extends mxGraphLayout to implement a radial tree algorithm. This layout is suitable for graphs that have no cycles (trees). Vertices that are not connected to the tree will be ignored by this layout.

Example

var layout = new mxRadialTreeLayout(graph);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxRadialTreeLayout	Constructs a new radial tree layout for the specified graph
Variables
angleOffset	The initial offset to compute the angle position.
rootx	The X co-ordinate of the root cell
rooty	The Y co-ordinate of the root cell
levelDistance	Holds the levelDistance.
nodeDistance	Holds the nodeDistance.
autoRadius	Specifies if the radios should be computed automatically
sortEdges	Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.
rowMinX	Array of leftmost x coordinate of each row
rowMaxX	Array of rightmost x coordinate of each row
rowMinCenX	Array of x coordinate of leftmost vertex of each row
rowMaxCenX	Array of x coordinate of rightmost vertex of each row
rowRadi	Array of y deltas of each row behind root vertex, also the radius in the tree
row	Array of vertices on each row
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
execute	Implements mxGraphLayout.execute.
calcRowDims	Recursive function to calculate the dimensions of each row

Functions

mxRadialTreeLayout

function mxRadialTreeLayout( graph )

Constructs a new radial tree layout for the specified graph

Variables

angleOffset

mxRadialTreeLayout.prototype.angleOffset

The initial offset to compute the angle position.

rootx

mxRadialTreeLayout.prototype.rootx

The X co-ordinate of the root cell

rooty

mxRadialTreeLayout.prototype.rooty

The Y co-ordinate of the root cell

levelDistance

mxRadialTreeLayout.prototype.levelDistance

Holds the levelDistance. Default is 120.

nodeDistance

mxRadialTreeLayout.prototype.nodeDistance

Holds the nodeDistance. Default is 10.

autoRadius

mxRadialTreeLayout.prototype.autoRadius

Specifies if the radios should be computed automatically

sortEdges

mxRadialTreeLayout.prototype.sortEdges

Specifies if edges should be sorted according to the order of their opposite terminal cell in the model.

rowMinX

mxRadialTreeLayout.prototype.rowMinX

Array of leftmost x coordinate of each row

rowMaxX

mxRadialTreeLayout.prototype.rowMaxX

Array of rightmost x coordinate of each row

rowMinCenX

mxRadialTreeLayout.prototype.rowMinCenX

Array of x coordinate of leftmost vertex of each row

rowMaxCenX

mxRadialTreeLayout.prototype.rowMaxCenX

Array of x coordinate of rightmost vertex of each row

rowRadi

mxRadialTreeLayout.prototype.rowRadi

Array of y deltas of each row behind root vertex, also the radius in the tree

row

mxRadialTreeLayout.prototype.row

Array of vertices on each row

Functions

isVertexIgnored

mxRadialTreeLayout.prototype.isVertexIgnored = function( vertex )

Returns a boolean indicating if the given mxCell should be ignored as a vertex. This returns true if the cell has no connections.

Parameters

vertex

mxCell whose ignored state should be returned.

execute

mxRadialTreeLayout.prototype.execute = function( parent,
root )

Implements mxGraphLayout.execute.

If the parent has any connected edges, then it is used as the root of the tree. Else, mxGraph.findTreeRoots will be used to find a suitable root node within the set of children of the given parent.

Parameters

parent	mxCell whose children should be laid out.
root	Optional mxCell that will be used as the root of the tree.

calcRowDims

mxRadialTreeLayout.prototype.calcRowDims = function( row,
rowNum )

Recursive function to calculate the dimensions of each row

Parameters

row	Array of internal nodes, the children of which are to be processed.
rowNum	Integer indicating which row is being processed.

mxFastOrganicLayout

Extends mxGraphLayout to implement a fast organic layout algorithm. The vertices need to be connected for this layout to work, vertices with no connections are ignored.

Example

var layout = new mxFastOrganicLayout(graph);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxCompactTreeLayout	Constructs a new fast organic layout for the specified graph.
Variables
useInputOrigin	Specifies if the top left corner of the input cells should be the origin of the layout result.
resetEdges	Specifies if all edge points of traversed edges should be removed.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
forceConstant	The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of.
forceConstantSquared	Cache of <forceConstant>^2 for performance.
minDistanceLimit	Minimal distance limit.
minDistanceLimit	Minimal distance limit.
minDistanceLimitSquared	Cached version of minDistanceLimit squared.
initialTemp	Start value of temperature.
temperature	Temperature to limit displacement at later stages of layout.
maxIterations	Total number of iterations to run the layout though.
iteration	Current iteration count.
vertexArray	An array of all vertices to be laid out.
dispX	An array of locally stored X co-ordinate displacements for the vertices.
dispY	An array of locally stored Y co-ordinate displacements for the vertices.
cellLocation	An array of locally stored co-ordinate positions for the vertices.
radius	The approximate radius of each cell, nodes only.
radiusSquared	The approximate radius squared of each cell, nodes only.
isMoveable	Array of booleans representing the movable states of the vertices.
neighbours	Local copy of cell neighbours.
indices	Hashtable from cells to local indices.
allowedToRun	Boolean flag that specifies if the layout is allowed to run.
Functions
isVertexIgnored	Returns a boolean indicating if the given mxCell should be ignored as a vertex.
execute	Implements mxGraphLayout.execute.
calcPositions	Takes the displacements calculated for each cell and applies them to the local cache of cell positions.
calcAttraction	Calculates the attractive forces between all laid out nodes linked by edges
calcRepulsion	Calculates the repulsive forces between all laid out nodes
reduceTemperature	Reduces the temperature of the layout from an initial setting in a linear fashion to zero.

Functions

mxCompactTreeLayout

Constructs a new fast organic layout for the specified graph.

Variables

useInputOrigin

mxFastOrganicLayout.prototype.useInputOrigin

Specifies if the top left corner of the input cells should be the origin of the layout result. Default is true.

resetEdges

mxFastOrganicLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed. Default is true.

disableEdgeStyle

mxFastOrganicLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.

forceConstant

mxFastOrganicLayout.prototype.forceConstant

The force constant by which the attractive forces are divided and the replusive forces are multiple by the square of. The value equates to the average radius there is of free space around each node. Default is 50.

forceConstantSquared

mxFastOrganicLayout.prototype.forceConstantSquared

Cache of <forceConstant>^2 for performance.

minDistanceLimit

mxFastOrganicLayout.prototype.minDistanceLimit

Minimal distance limit. Default is 2. Prevents of dividing by zero.

minDistanceLimit

Minimal distance limit. Default is 2. Prevents of dividing by zero.

minDistanceLimitSquared

mxFastOrganicLayout.prototype.minDistanceLimitSquared

Cached version of minDistanceLimit squared.

initialTemp

mxFastOrganicLayout.prototype.initialTemp

Start value of temperature. Default is 200.

temperature

mxFastOrganicLayout.prototype.temperature

Temperature to limit displacement at later stages of layout.

maxIterations

mxFastOrganicLayout.prototype.maxIterations

Total number of iterations to run the layout though.

iteration

mxFastOrganicLayout.prototype.iteration

Current iteration count.

vertexArray

mxFastOrganicLayout.prototype.vertexArray

An array of all vertices to be laid out.

dispX

mxFastOrganicLayout.prototype.dispX

An array of locally stored X co-ordinate displacements for the vertices.

dispY

mxFastOrganicLayout.prototype.dispY

An array of locally stored Y co-ordinate displacements for the vertices.

cellLocation

mxFastOrganicLayout.prototype.cellLocation

An array of locally stored co-ordinate positions for the vertices.

radius

mxFastOrganicLayout.prototype.radius

The approximate radius of each cell, nodes only.

radiusSquared

mxFastOrganicLayout.prototype.radiusSquared

The approximate radius squared of each cell, nodes only.

isMoveable

mxFastOrganicLayout.prototype.isMoveable

Array of booleans representing the movable states of the vertices.

neighbours

mxFastOrganicLayout.prototype.neighbours

Local copy of cell neighbours.

indices

mxFastOrganicLayout.prototype.indices

Hashtable from cells to local indices.

allowedToRun

mxFastOrganicLayout.prototype.allowedToRun

Boolean flag that specifies if the layout is allowed to run. If this is set to false, then the layout exits in the following iteration.

Functions

isVertexIgnored

mxFastOrganicLayout.prototype.isVertexIgnored = function( vertex )

Returns a boolean indicating if the given mxCell should be ignored as a vertex. This returns true if the cell has no connections.

Parameters

vertex

mxCell whose ignored state should be returned.

execute

mxFastOrganicLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute. This operates on all children of the given parent where isVertexIgnored returns false.

calcPositions

mxFastOrganicLayout.prototype.calcPositions = function()

Takes the displacements calculated for each cell and applies them to the local cache of cell positions. Limits the displacement to the current temperature.

calcAttraction

mxFastOrganicLayout.prototype.calcAttraction = function()

Calculates the attractive forces between all laid out nodes linked by edges

calcRepulsion

mxFastOrganicLayout.prototype.calcRepulsion = function()

Calculates the repulsive forces between all laid out nodes

reduceTemperature

mxFastOrganicLayout.prototype.reduceTemperature = function()

Reduces the temperature of the layout from an initial setting in a linear fashion to zero.

mxCircleLayout

Extends mxGraphLayout to implement a circluar layout for a given radius. The vertices do not need to be connected for this layout to work and all connections between vertices are not taken into account.

Example

var layout = new mxCircleLayout(graph);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxCircleLayout	Constructs a new circular layout for the specified radius.
Variables
radius	Integer specifying the size of the radius.
moveCircle	Boolean specifying if the circle should be moved to the top, left corner specified by x0 and y0.
x0	Integer specifying the left coordinate of the circle.
y0	Integer specifying the top coordinate of the circle.
resetEdges	Specifies if all edge points of traversed edges should be removed.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
Functions
execute	Implements mxGraphLayout.execute.
getRadius	Returns the radius to be used for the given vertex count.
circle	Executes the circular layout for the specified array of vertices and the given radius.

Functions

mxCircleLayout

function mxCircleLayout( graph,
radius )

Constructs a new circular layout for the specified radius.

Arguments

graph	mxGraph that contains the cells.
radius	Optional radius as an int. Default is 100.

Variables

radius

mxCircleLayout.prototype.radius

Integer specifying the size of the radius. Default is 100.

moveCircle

mxCircleLayout.prototype.moveCircle

Boolean specifying if the circle should be moved to the top, left corner specified by x0 and y0. Default is false.

x0

mxCircleLayout.prototype.x0

Integer specifying the left coordinate of the circle. Default is 0.

y0

mxCircleLayout.prototype.y0

Integer specifying the top coordinate of the circle. Default is 0.

resetEdges

mxCircleLayout.prototype.resetEdges

Specifies if all edge points of traversed edges should be removed. Default is true.

disableEdgeStyle

mxCircleLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.

Functions

execute

mxCircleLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute.

getRadius

mxCircleLayout.prototype.getRadius = function( count,
max )

Returns the radius to be used for the given vertex count. Max is the maximum width or height of all vertices in the layout.

circle

mxCircleLayout.prototype.circle = function( vertices,
r,
left,
top )

Executes the circular layout for the specified array of vertices and the given radius. This is called from execute.

mxParallelEdgeLayout

Extends mxGraphLayout for arranging parallel edges. This layout works on edges for all pairs of vertices where there is more than one edge connecting the latter.

Example

var layout = new mxParallelEdgeLayout(graph);
layout.execute(graph.getDefaultParent());

To run the layout for the parallel edges of a changed edge only, the following code can be used.

var layout = new mxParallelEdgeLayout(graph);

graph.addListener(mxEvent.CELL_CONNECTED, function(sender, evt)
{
  var model = graph.getModel();
  var edge = evt.getProperty('edge');
  var src = model.getTerminal(edge, true);
  var trg = model.getTerminal(edge, false);

  layout.isEdgeIgnored = function(edge2)
  {
    var src2 = model.getTerminal(edge2, true);
    var trg2 = model.getTerminal(edge2, false);

    return !(model.isEdge(edge2) && ((src == src2 && trg == trg2) || (src == trg2 && trg == src2)));
  };

  layout.execute(graph.getDefaultParent());
});

Summary

Functions
mxCompactTreeLayout	Constructs a new fast organic layout for the specified graph.
Variables
spacing	Defines the spacing between the parallels.
Functions
execute	Implements mxGraphLayout.execute.
findParallels	Finds the parallel edges in the given parent.
getEdgeId	Returns a unique ID for the given edge.
layout	Lays out the parallel edges in the given array.
route	Routes the given edge via the given point.

Functions

mxCompactTreeLayout

Constructs a new fast organic layout for the specified graph.

Variables

spacing

mxParallelEdgeLayout.prototype.spacing

Defines the spacing between the parallels. Default is 20.

Functions

execute

mxParallelEdgeLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute.

findParallels

mxParallelEdgeLayout.prototype.findParallels = function( parent )

Finds the parallel edges in the given parent.

getEdgeId

mxParallelEdgeLayout.prototype.getEdgeId = function( edge )

Returns a unique ID for the given edge. The id is independent of the edge direction and is built using the visible terminal of the given edge.

layout

mxParallelEdgeLayout.prototype.layout = function( parallels )

Lays out the parallel edges in the given array.

route

mxParallelEdgeLayout.prototype.route = function( edge,
x,
y )

Routes the given edge via the given point.

mxCompositeLayout

Allows to compose multiple layouts into a single layout. The master layout is the layout that handles move operations if another layout than the first element in layouts should be used. The <master> layout is not executed as the code assumes that it is part of layouts.

Example

var first = new mxFastOrganicLayout(graph);
var second = new mxParallelEdgeLayout(graph);
var layout = new mxCompositeLayout(graph, [first, second], first);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxCompositeLayout	Constructs a new layout using the given layouts.
Variables
layouts	Holds the array of mxGraphLayouts that this layout contains.
layouts	Reference to the mxGraphLayouts that handles moves.
Functions
moveCell	Implements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.
execute	Implements mxGraphLayout.execute by executing all layouts in a single transaction.

Functions

mxCompositeLayout

function mxCompositeLayout( graph,
layouts,
master )

Constructs a new layout using the given layouts. The graph instance is required for creating the transaction that contains all layouts.

Arguments

graph	Reference to the enclosing mxGraph.
layouts	Array of mxGraphLayouts.
master	Optional layout that handles moves. If no layout is given then the first layout of the above array is used to handle moves.

Variables

layouts

mxCompositeLayout.prototype.layouts

Holds the array of mxGraphLayouts that this layout contains.

layouts

Reference to the mxGraphLayouts that handles moves. If this is null then the first layout in layouts is used.

Functions

moveCell

mxCompositeLayout.prototype.moveCell = function( cell,
x,
y )

Implements mxGraphLayout.moveCell by calling move on <master> or the first layout in layouts.

execute

mxCompositeLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute by executing all layouts in a single transaction.

mxEdgeLabelLayout

Extends mxGraphLayout to implement an edge label layout. This layout makes use of cell states, which means the graph must be validated in a graph view (so that the label bounds are available) before this layout can be executed.

Example

var layout = new mxEdgeLabelLayout(graph);
layout.execute(graph.getDefaultParent());

Summary

Functions
mxEdgeLabelLayout	Constructs a new edge label layout.
execute	Implements mxGraphLayout.execute.
placeLabels	Places the labels of the given edges.
avoid	Places the labels of the given edges.

Functions

mxEdgeLabelLayout

function mxEdgeLabelLayout( graph,
radius )

Constructs a new edge label layout.

Arguments

graph

mxGraph that contains the cells.

execute

mxEdgeLabelLayout.prototype.execute = function( parent )

Implements mxGraphLayout.execute.

placeLabels

mxEdgeLabelLayout.prototype.placeLabels = function( v,
e )

Places the labels of the given edges.

avoid

mxEdgeLabelLayout.prototype.avoid = function( edge,
vertex )

Places the labels of the given edges.

mxGraphAbstractHierarchyCell

An abstraction of an internal hierarchy node or edge

Summary

Functions
mxGraphAbstractHierarchyCell	Constructs a new hierarchical layout algorithm.
Variables
maxRank	The maximum rank this cell occupies.
minRank	The minimum rank this cell occupies.
x	The x position of this cell for each layer it occupies
y	The y position of this cell for each layer it occupies
width	The width of this cell
height	The height of this cell
nextLayerConnectedCells	A cached version of the cells this cell connects to on the next layer up
previousLayerConnectedCells	A cached version of the cells this cell connects to on the next layer down
temp	Temporary variable for general use.
Functions
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isEdge	Returns whether or not this cell is an edge
isVertex	Returns whether or not this cell is a node
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
setX	Set the value of x for the specified layer
getX	Gets the value of x on the specified layer
setY	Set the value of y for the specified layer

Functions

mxGraphAbstractHierarchyCell

function mxGraphAbstractHierarchyCell()

Constructs a new hierarchical layout algorithm.

Arguments

graph	Reference to the enclosing mxGraph.
deterministic	Optional boolean that specifies if this layout should be deterministic. Default is true.

Variables

maxRank

mxGraphAbstractHierarchyCell.prototype.maxRank

The maximum rank this cell occupies. Default is -1.

minRank

mxGraphAbstractHierarchyCell.prototype.minRank

The minimum rank this cell occupies. Default is -1.

x

mxGraphAbstractHierarchyCell.prototype.x

The x position of this cell for each layer it occupies

y

mxGraphAbstractHierarchyCell.prototype.y

The y position of this cell for each layer it occupies

width

mxGraphAbstractHierarchyCell.prototype.width

The width of this cell

height

mxGraphAbstractHierarchyCell.prototype.height

The height of this cell

nextLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.nextLayerConnectedCells

A cached version of the cells this cell connects to on the next layer up

previousLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.previousLayerConnectedCells

A cached version of the cells this cell connects to on the next layer down

temp

mxGraphAbstractHierarchyCell.prototype.temp

Temporary variable for general use. Generally, try to avoid carrying information between stages. Currently, the longest path layering sets temp to the rank position in fixRanks() and the crossing reduction uses this. This meant temp couldn’t be used for hashing the nodes in the model dfs and so hashCode was created

Functions

getNextLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.getNextLayerConnectedCells = function(
layer
)

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphAbstractHierarchyCell.prototype.getPreviousLayerConnectedCells = function(
layer
)

Returns the cells this cell connects to on the next layer down

isEdge

mxGraphAbstractHierarchyCell.prototype.isEdge = function()

Returns whether or not this cell is an edge

isVertex

mxGraphAbstractHierarchyCell.prototype.isVertex = function()

Returns whether or not this cell is a node

getGeneralPurposeVariable

mxGraphAbstractHierarchyCell.prototype.getGeneralPurposeVariable = function(
layer
)

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphAbstractHierarchyCell.prototype.setGeneralPurposeVariable = function(
layer,
value
)

Set the value of temp for the specified layer

setX

mxGraphAbstractHierarchyCell.prototype.setX = function( layer,
value )

Set the value of x for the specified layer

getX

mxGraphAbstractHierarchyCell.prototype.getX = function( layer )

Gets the value of x on the specified layer

setY

mxGraphAbstractHierarchyCell.prototype.setY = function( layer,
value )

Set the value of y for the specified layer

mxGraphHierarchyNode

An abstraction of a hierarchical edge for the hierarchy layout

Summary

Functions
mxGraphHierarchyNode	Constructs an internal node to represent the specified real graph cell
Variables
cell	The graph cell this object represents.
id	The object identity of the wrapped cell
connectsAsTarget	Collection of hierarchy edges that have this node as a target
connectsAsSource	Collection of hierarchy edges that have this node as a source
hashCode	Assigns a unique hashcode for each node.
Functions
getRankValue	Returns the integer value of the layer that this node resides in
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isVertex	Returns true.
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
isAncestor
getCoreCell	Gets the core vertex associated with this wrapper

Functions

mxGraphHierarchyNode

function mxGraphHierarchyNode( cell )

Constructs an internal node to represent the specified real graph cell

Arguments

cell	the real graph cell this node represents

Variables

cell

mxGraphHierarchyNode.prototype.cell

The graph cell this object represents.

id

mxGraphHierarchyNode.prototype.id

The object identity of the wrapped cell

connectsAsTarget

mxGraphHierarchyNode.prototype.connectsAsTarget

Collection of hierarchy edges that have this node as a target

connectsAsSource

mxGraphHierarchyNode.prototype.connectsAsSource

Collection of hierarchy edges that have this node as a source

hashCode

mxGraphHierarchyNode.prototype.hashCode

Assigns a unique hashcode for each node. Used by the model dfs instead of copying HashSets

Functions

getRankValue

mxGraphHierarchyNode.prototype.getRankValue = function( layer )

Returns the integer value of the layer that this node resides in

getNextLayerConnectedCells

mxGraphHierarchyNode.prototype.getNextLayerConnectedCells = function( layer )

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphHierarchyNode.prototype.getPreviousLayerConnectedCells = function( layer )

Returns the cells this cell connects to on the next layer down

isVertex

mxGraphHierarchyNode.prototype.isVertex = function()

Returns true.

getGeneralPurposeVariable

mxGraphHierarchyNode.prototype.getGeneralPurposeVariable = function( layer )

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphHierarchyNode.prototype.setGeneralPurposeVariable = function( layer,
value )

Set the value of temp for the specified layer

isAncestor

mxGraphHierarchyNode.prototype.isAncestor = function( otherNode )

getCoreCell

mxGraphHierarchyNode.prototype.getCoreCell = function()

Gets the core vertex associated with this wrapper

mxGraphHierarchyEdge

An abstraction of a hierarchical edge for the hierarchy layout

Summary

Functions
mxGraphHierarchyEdge	Constructs a hierarchy edge
Variables
edges	The graph edge(s) this object represents.
ids	The object identities of the wrapped cells
source	The node this edge is sourced at
target	The node this edge targets
isReversed	Whether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout
Functions
invert	Inverts the direction of this internal edge(s)
getNextLayerConnectedCells	Returns the cells this cell connects to on the next layer up
getPreviousLayerConnectedCells	Returns the cells this cell connects to on the next layer down
isEdge	Returns true.
getGeneralPurposeVariable	Gets the value of temp for the specified layer
setGeneralPurposeVariable	Set the value of temp for the specified layer
getCoreCell	Gets the first core edge associated with this wrapper

Functions

mxGraphHierarchyEdge

function mxGraphHierarchyEdge( edges )

Constructs a hierarchy edge

Arguments

edges

a list of real graph edges this abstraction represents

Variables

edges

mxGraphHierarchyEdge.prototype.edges

The graph edge(s) this object represents. Parallel edges are all grouped together within one hierarchy edge.

ids

mxGraphHierarchyEdge.prototype.ids

The object identities of the wrapped cells

source

mxGraphHierarchyEdge.prototype.source

The node this edge is sourced at

target

mxGraphHierarchyEdge.prototype.target

The node this edge targets

isReversed

mxGraphHierarchyEdge.prototype.isReversed

Whether or not the direction of this edge has been reversed internally to create a DAG for the hierarchical layout

Functions

invert

mxGraphHierarchyEdge.prototype.invert = function( layer )

Inverts the direction of this internal edge(s)

getNextLayerConnectedCells

mxGraphHierarchyEdge.prototype.getNextLayerConnectedCells = function( layer )

Returns the cells this cell connects to on the next layer up

getPreviousLayerConnectedCells

mxGraphHierarchyEdge.prototype.getPreviousLayerConnectedCells = function( layer )

Returns the cells this cell connects to on the next layer down

isEdge

mxGraphHierarchyEdge.prototype.isEdge = function()

Returns true.

getGeneralPurposeVariable

mxGraphHierarchyEdge.prototype.getGeneralPurposeVariable = function( layer )

Gets the value of temp for the specified layer

setGeneralPurposeVariable

mxGraphHierarchyEdge.prototype.setGeneralPurposeVariable = function( layer,
value )

Set the value of temp for the specified layer

getCoreCell

mxGraphHierarchyEdge.prototype.getCoreCell = function()

Gets the first core edge associated with this wrapper

mxGraphHierarchyModel

Internal model of a hierarchical graph. This model stores nodes and edges equivalent to the real graph nodes and edges, but also stores the rank of the cells, the order within the ranks and the new candidate locations of cells. The internal model also reverses edge direction were appropriate , ignores self-loop and groups parallels together under one edge object.

Summary

Functions
mxGraphHierarchyModel	Creates an internal ordered graph model using the vertices passed in.
Variables
maxRank	Stores the largest rank number allocated
vertexMapper	Map from graph vertices to internal model nodes.
edgeMapper	Map from graph edges to internal model edges
ranks	Mapping from rank number to actual rank
roots	Store of roots of this hierarchy model, these are real graph cells, not internal cells
parent	The parent cell whose children are being laid out
dfsCount	Count of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANK	High value to start source layering scan rank value from.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
Functions
createInternalCells	Creates all edges in the internal model
initialRank	Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
fixRanks	Fixes the layer assignments to the values stored in the nodes.
visit	A depth first search through the internal heirarchy model.
dfs	Performs a depth first search on the internal hierarchy model
extendedDfs	Performs a depth first search on the internal hierarchy model.

Functions

mxGraphHierarchyModel

function mxGraphHierarchyModel( layout,
vertices,
roots,
parent,
tightenToSource )

Creates an internal ordered graph model using the vertices passed in. If there are any, leftward edge need to be inverted in the internal model

Arguments

graph	the facade describing the graph to be operated on
vertices	the vertices for this hierarchy
ordered	whether or not the vertices are already ordered
deterministic	whether or not this layout should be deterministic on each
tightenToSource	whether or not to tighten vertices towards the sources
scanRanksFromSinks	Whether rank assignment is from the sinks or sources. usage

Variables

maxRank

mxGraphHierarchyModel.prototype.maxRank

Stores the largest rank number allocated

vertexMapper

mxGraphHierarchyModel.prototype.vertexMapper

Map from graph vertices to internal model nodes.

edgeMapper

mxGraphHierarchyModel.prototype.edgeMapper

Map from graph edges to internal model edges

ranks

mxGraphHierarchyModel.prototype.ranks

Mapping from rank number to actual rank

roots

mxGraphHierarchyModel.prototype.roots

Store of roots of this hierarchy model, these are real graph cells, not internal cells

parent

mxGraphHierarchyModel.prototype.parent

The parent cell whose children are being laid out

dfsCount

mxGraphHierarchyModel.prototype.dfsCount

Count of the number of times the ancestor dfs has been used.

SOURCESCANSTARTRANK

mxGraphHierarchyModel.prototype.SOURCESCANSTARTRANK

High value to start source layering scan rank value from.

tightenToSource

mxGraphHierarchyModel.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

Functions

createInternalCells

mxGraphHierarchyModel.prototype.createInternalCells = function( layout,
vertices,
internalVertices )

Creates all edges in the internal model

Parameters

layout	Reference to the mxHierarchicalLayout algorithm.
vertices	Array of mxCells that represent the vertices whom are to have an internal representation created.
internalVertices	The array of mxGraphHierarchyNodes to have their information filled in using the real vertices.

initialRank

mxGraphHierarchyModel.prototype.initialRank = function()

Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction. Starting at the sinks is basically a longest path layering algorithm.

fixRanks

mxGraphHierarchyModel.prototype.fixRanks = function()

Fixes the layer assignments to the values stored in the nodes. Also needs to create dummy nodes for edges that cross layers.

visit

mxGraphHierarchyModel.prototype.visit = function( visitor,
dfsRoots,
trackAncestors,
seenNodes )

A depth first search through the internal heirarchy model.

Parameters

visitor	The visitor function pattern to be called for each node.
trackAncestors	Whether or not the search is to keep track all nodes directly above this one in the search path.

dfs

mxGraphHierarchyModel.prototype.dfs = function( parent,
root,
connectingEdge,
visitor,
seen,
layer )

Performs a depth first search on the internal hierarchy model

Parameters

parent	the parent internal node of the current internal node
root	the current internal node
connectingEdge	the internal edge connecting the internal node and the parent internal node, if any
visitor	the visitor pattern to be called for each node
seen	a set of all nodes seen by this dfs a set of all of the ancestor node of the current node
layer	the layer on the dfs tree ( not the same as the model ranks )

extendedDfs

mxGraphHierarchyModel.prototype.extendedDfs = function( parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer )

Performs a depth first search on the internal hierarchy model. This dfs extends the default version by keeping track of cells ancestors, but it should be only used when necessary because of it can be computationally intensive for deep searches.

Parameters

parent	the parent internal node of the current internal node
root	the current internal node
connectingEdge	the internal edge connecting the internal node and the parent internal node, if any
visitor	the visitor pattern to be called for each node
seen	a set of all nodes seen by this dfs
ancestors	the parent hash code
childHash	the new hash code for this node
layer	the layer on the dfs tree ( not the same as the model ranks )

mxSwimlaneModel

Summary

Functions
mxSwimlaneModel	Creates an internal ordered graph model using the vertices passed in.
Variables
maxRank	Stores the largest rank number allocated
vertexMapper	Map from graph vertices to internal model nodes.
edgeMapper	Map from graph edges to internal model edges
ranks	Mapping from rank number to actual rank
roots	Store of roots of this hierarchy model, these are real graph cells, not internal cells
parent	The parent cell whose children are being laid out
dfsCount	Count of the number of times the ancestor dfs has been used.
SOURCESCANSTARTRANK	High value to start source layering scan rank value from.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
ranksPerGroup	An array of the number of ranks within each swimlane
Functions
createInternalCells	Creates all edges in the internal model
initialRank	Basic determination of minimum layer ranking by working from from sources or sinks and working through each node in the relevant edge direction.
maxChainDfs	Performs a depth first search on the internal hierarchy model.
fixRanks	Fixes the layer assignments to the values stored in the nodes.
visit	A depth first search through the internal heirarchy model.
dfs	Performs a depth first search on the internal hierarchy model
extendedDfs	Performs a depth first search on the internal hierarchy model.

Functions

mxSwimlaneModel

function mxSwimlaneModel( layout,
vertices,
roots,
parent,
tightenToSource )

Creates an internal ordered graph model using the vertices passed in. If there are any, leftward edge need to be inverted in the internal model

Arguments

graph	the facade describing the graph to be operated on
vertices	the vertices for this hierarchy
ordered	whether or not the vertices are already ordered
deterministic	whether or not this layout should be deterministic on each
tightenToSource	whether or not to tighten vertices towards the sources
scanRanksFromSinks	Whether rank assignment is from the sinks or sources. usage

Variables

maxRank

mxSwimlaneModel.prototype.maxRank

Stores the largest rank number allocated

vertexMapper

mxSwimlaneModel.prototype.vertexMapper

Map from graph vertices to internal model nodes.

edgeMapper

mxSwimlaneModel.prototype.edgeMapper

Map from graph edges to internal model edges

ranks

mxSwimlaneModel.prototype.ranks

Mapping from rank number to actual rank

roots

mxSwimlaneModel.prototype.roots

Store of roots of this hierarchy model, these are real graph cells, not internal cells

parent

mxSwimlaneModel.prototype.parent

The parent cell whose children are being laid out

dfsCount

mxSwimlaneModel.prototype.dfsCount

Count of the number of times the ancestor dfs has been used.

SOURCESCANSTARTRANK

mxSwimlaneModel.prototype.SOURCESCANSTARTRANK

High value to start source layering scan rank value from.

tightenToSource

mxSwimlaneModel.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

ranksPerGroup

mxSwimlaneModel.prototype.ranksPerGroup

An array of the number of ranks within each swimlane

Functions

createInternalCells

mxSwimlaneModel.prototype.createInternalCells = function( layout,
vertices,
internalVertices )

Creates all edges in the internal model

Parameters

layout	Reference to the mxHierarchicalLayout algorithm.
vertices	Array of mxCells that represent the vertices whom are to have an internal representation created.
internalVertices	The array of mxGraphHierarchyNodes to have their information filled in using the real vertices.

initialRank

mxSwimlaneModel.prototype.initialRank = function()

maxChainDfs

mxSwimlaneModel.prototype.maxChainDfs = function( parent,
root,
connectingEdge,
seen,
chainCount )

Performs a depth first search on the internal hierarchy model. This dfs extends the default version by keeping track of chains within groups. Any cycles should be removed prior to running, but previously seen cells are ignored.

Parameters

parent	the parent internal node of the current internal node
root	the current internal node
connectingEdge	the internal edge connecting the internal node and the parent internal node, if any
seen	a set of all nodes seen by this dfs
chainCount	the number of edges in the chain of vertices going through the current swimlane

fixRanks

mxSwimlaneModel.prototype.fixRanks = function()

Fixes the layer assignments to the values stored in the nodes. Also needs to create dummy nodes for edges that cross layers.

visit

mxSwimlaneModel.prototype.visit = function( visitor,
dfsRoots,
trackAncestors,
seenNodes )

A depth first search through the internal heirarchy model.

Parameters

visitor	The visitor function pattern to be called for each node.
trackAncestors	Whether or not the search is to keep track all nodes directly above this one in the search path.

dfs

mxSwimlaneModel.prototype.dfs = function( parent,
root,
connectingEdge,
visitor,
seen,
layer )

Performs a depth first search on the internal hierarchy model

Parameters

parent	the parent internal node of the current internal node
root	the current internal node
connectingEdge	the internal edge connecting the internal node and the parent internal node, if any
visitor	the visitor pattern to be called for each node
seen	a set of all nodes seen by this dfs a set of all of the ancestor node of the current node
layer	the layer on the dfs tree ( not the same as the model ranks )

extendedDfs

mxSwimlaneModel.prototype.extendedDfs = function( parent,
root,
connectingEdge,
visitor,
seen,
ancestors,
childHash,
layer )

Parameters

parent	the parent internal node of the current internal node
root	the current internal node
connectingEdge	the internal edge connecting the internal node and the parent internal node, if any
visitor	the visitor pattern to be called for each node
seen	a set of all nodes seen by this dfs
ancestors	the parent hash code
childHash	the new hash code for this node
layer	the layer on the dfs tree ( not the same as the model ranks )

mxHierarchicalLayoutStage

The specific layout interface for hierarchical layouts. It adds a <code>run</code> method with a parameter for the hierarchical layout model that is shared between the layout stages.

Summary

Functions
mxHierarchicalLayoutStage	Constructs a new hierarchical layout stage.
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxHierarchicalLayoutStage

function mxHierarchicalLayoutStage()

Constructs a new hierarchical layout stage.

execute

mxHierarchicalLayoutStage.prototype.execute = function( parent )

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxMedianHybridCrossingReduction

Sets the horizontal locations of node and edge dummy nodes on each layer. Uses median down and up weighings as well heuristic to straighten edges as far as possible.

Summary

Functions
mxMedianHybridCrossingReduction	Creates a coordinate assignment.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
maxIterations	The maximum number of iterations to perform whilst reducing edge crossings.
nestedBestRanks	Stores each rank as a collection of cells in the best order found for each layer so far
currentBestCrossings	The total number of crossings found in the best configuration so far
iterationsWithoutImprovement	The total number of crossings found in the best configuration so far
maxNoImprovementIterations	The total number of crossings found in the best configuration so far
Functions
execute	Performs a vertex ordering within ranks as described by Gansner et al 1993
calculateCrossings	Calculates the total number of edge crossing in the current graph.
calculateRankCrossing	Calculates the number of edges crossings between the specified rank and the rank below it.
transpose	Takes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing
weightedMedian	Sweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks
medianRank	Attempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks
medianValue	Calculates the median rank order positioning for the specified cell using the connected cells on the specified rank.

Functions

mxMedianHybridCrossingReduction

function mxMedianHybridCrossingReduction( layout )

Creates a coordinate assignment.

Arguments

intraCellSpacing	the minimum buffer between cells on the same rank
interRankCellSpacing	the minimum distance between cells on adjacent ranks
orientation	the position of the root node(s) relative to the graph
initialX	the leftmost coordinate node placement starts at

Variables

layout

mxMedianHybridCrossingReduction.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

maxIterations

mxMedianHybridCrossingReduction.prototype.maxIterations

The maximum number of iterations to perform whilst reducing edge crossings. Default is 24.

nestedBestRanks

mxMedianHybridCrossingReduction.prototype.nestedBestRanks

Stores each rank as a collection of cells in the best order found for each layer so far

currentBestCrossings

mxMedianHybridCrossingReduction.prototype.currentBestCrossings

The total number of crossings found in the best configuration so far

iterationsWithoutImprovement

mxMedianHybridCrossingReduction.prototype.iterationsWithoutImprovement

The total number of crossings found in the best configuration so far

maxNoImprovementIterations

mxMedianHybridCrossingReduction.prototype.maxNoImprovementIterations

The total number of crossings found in the best configuration so far

Functions

execute

mxMedianHybridCrossingReduction.prototype.execute = function( parent )

Performs a vertex ordering within ranks as described by Gansner et al 1993

calculateCrossings

mxMedianHybridCrossingReduction.prototype.calculateCrossings = function( model )

Calculates the total number of edge crossing in the current graph. Returns the current number of edge crossings in the hierarchy graph model in the current candidate layout

Parameters

model

the internal model describing the hierarchy

calculateRankCrossing

mxMedianHybridCrossingReduction.prototype.calculateRankCrossing = function(
i,
model
)

Calculates the number of edges crossings between the specified rank and the rank below it. Returns the number of edges crossings with the rank beneath

Parameters

i	the topmost rank of the pair ( higher rank value )
model	the internal model describing the hierarchy

transpose

mxMedianHybridCrossingReduction.prototype.transpose = function(
mainLoopIteration,
model
)

Takes each possible adjacent cell pair on each rank and checks if swapping them around reduces the number of crossing

Parameters

mainLoopIteration	the iteration number of the main loop
model	the internal model describing the hierarchy

weightedMedian

mxMedianHybridCrossingReduction.prototype.weightedMedian = function( iteration,
model )

Sweeps up or down the layout attempting to minimise the median placement of connected cells on adjacent ranks

Parameters

iteration	the iteration number of the main loop
model	the internal model describing the hierarchy

medianRank

mxMedianHybridCrossingReduction.prototype.medianRank = function( rankValue,
downwardSweep )

Attempts to minimise the median placement of connected cells on this rank and one of the adjacent ranks

Parameters

rankValue	the layer number of this rank
downwardSweep	whether or not this is a downward sweep through the graph

medianValue

mxMedianHybridCrossingReduction.prototype.medianValue = function(
connectedCells,
rankValue
)

Calculates the median rank order positioning for the specified cell using the connected cells on the specified rank. Returns the median rank ordering value of the connected cells

Parameters

connectedCells	the cells on the specified rank connected to the specified cell
rankValue	the rank that the connected cell lie upon

MedianCellSorter

A utility class used to track cells whilst sorting occurs on the median values. Does not violate (x.compareTo(y)==0) == (x.equals(y))

Summary

Functions
MedianCellSorter	Constructs a new median cell sorter.
Variables
medianValue	The weighted value of the cell stored.
cell	The cell whose median value is being calculated
Functions
compare	Compares two MedianCellSorters.

Functions

MedianCellSorter

function MedianCellSorter()

Constructs a new median cell sorter.

Variables

medianValue

MedianCellSorter.prototype.medianValue

The weighted value of the cell stored.

cell

MedianCellSorter.prototype.cell

The cell whose median value is being calculated

Functions

compare

MedianCellSorter.prototype.compare = function( a,
b )

Compares two MedianCellSorters.

mxMinimumCycleRemover

An implementation of the first stage of the Sugiyama layout. Straightforward longest path calculation of layer assignment

Summary

Functions
mxMinimumCycleRemover	Creates a cycle remover for the given internal model.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
Functions
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxMinimumCycleRemover

function mxMinimumCycleRemover( layout )

Creates a cycle remover for the given internal model.

Variables

layout

mxMinimumCycleRemover.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

Functions

execute

mxMinimumCycleRemover.prototype.execute = function( parent )

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxCoordinateAssignment

Sets the horizontal locations of node and edge dummy nodes on each layer. Uses median down and up weighings as well as heuristics to straighten edges as far as possible.

Summary

Functions
mxCoordinateAssignment	Creates a coordinate assignment.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
intraCellSpacing	The minimum buffer between cells on the same rank.
interRankCellSpacing	The minimum distance between cells on adjacent ranks.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges.
maxIterations	The number of heuristic iterations to run.
prefHozEdgeSep	The preferred horizontal distance between edges exiting a vertex
prefVertEdgeOff	The preferred vertical offset between edges exiting a vertex
minEdgeJetty	The minimum distance for an edge jetty from a vertex
channelBuffer	The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed
jettyPositions	Map of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices.
orientation	The position of the root ( start ) node(s) relative to the rest of the laid out graph.
initialX	The minimum x position node placement starts at
limitX	The maximum x value this positioning lays up to
currentXDelta	The sum of x-displacements for the current iteration
widestRank	The rank that has the widest x position
rankTopY	Internal cache of top-most values of Y for each rank
rankBottomY	Internal cache of bottom-most value of Y for each rank
widestRankValue	The X-coordinate of the edge of the widest rank
rankWidths	The width of all the ranks
rankY	The Y-coordinate of all the ranks
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
nextLayerConnectedCache	A store of connections to the layer above for speed
previousLayerConnectedCache	A store of connections to the layer below for speed
groupPadding	Padding added to resized parents
Functions
execute	A basic horizontal coordinate assignment algorithm
minNode	Performs one median positioning sweep in both directions
medianPos	Performs one median positioning sweep in one direction
rankMedianPosition	Performs median minimisation over one rank.
calculatedWeightedValue	Calculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer
medianXValue	Calculates the median position of the connected cell on the specified rank
initialCoords	Sets up the layout in an initial positioning.
rankCoordinates	Sets up the layout in an initial positioning.
calculateWidestRank	Calculates the width rank in the hierarchy.
minPath	Straightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.
repositionValid	Determines whether or not a node may be moved to the specified x position on the specified rank
setCellLocations	Sets the cell locations in the facade to those stored after this layout processing step has completed.
localEdgeProcessing	Separates the x position of edges as they connect to vertices
setEdgePosition	Fixes the control points
setVertexLocation	Fixes the position of the specified vertex.
processReversedEdge	Hook to add additional processing

Functions

mxCoordinateAssignment

function mxCoordinateAssignment( layout,
intraCellSpacing,
interRankCellSpacing,
orientation,
initialX,
parallelEdgeSpacing )

Creates a coordinate assignment.

Arguments

intraCellSpacing	the minimum buffer between cells on the same rank
interRankCellSpacing	the minimum distance between cells on adjacent ranks
orientation	the position of the root node(s) relative to the graph
initialX	the leftmost coordinate node placement starts at

Variables

layout

mxCoordinateAssignment.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

intraCellSpacing

mxCoordinateAssignment.prototype.intraCellSpacing

The minimum buffer between cells on the same rank. Default is 30.

interRankCellSpacing

mxCoordinateAssignment.prototype.interRankCellSpacing

The minimum distance between cells on adjacent ranks. Default is 10.

parallelEdgeSpacing

mxCoordinateAssignment.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges. Default is 10.

maxIterations

mxCoordinateAssignment.prototype.maxIterations

The number of heuristic iterations to run. Default is 8.

prefHozEdgeSep

mxCoordinateAssignment.prototype.prefHozEdgeSep

The preferred horizontal distance between edges exiting a vertex

prefVertEdgeOff

mxCoordinateAssignment.prototype.prefVertEdgeOff

The preferred vertical offset between edges exiting a vertex

minEdgeJetty

mxCoordinateAssignment.prototype.minEdgeJetty

The minimum distance for an edge jetty from a vertex

channelBuffer

mxCoordinateAssignment.prototype.channelBuffer

The size of the vertical buffer in the center of inter-rank channels where edge control points should not be placed

jettyPositions

mxCoordinateAssignment.prototype.jettyPositions

Map of internal edges and (x,y) pair of positions of the start and end jetty for that edge where it connects to the source and target vertices. Note this should technically be a WeakHashMap, but since JS does not have an equivalent, housekeeping must be performed before using. i.e. check all edges are still in the model and clear the values. Note that the y co-ord is the offset of the jetty, not the absolute point

orientation

mxCoordinateAssignment.prototype.orientation

The position of the root ( start ) node(s) relative to the rest of the laid out graph. Default is mxConstants.DIRECTION_NORTH.

initialX

mxCoordinateAssignment.prototype.initialX

The minimum x position node placement starts at

limitX

mxCoordinateAssignment.prototype.limitX

The maximum x value this positioning lays up to

currentXDelta

mxCoordinateAssignment.prototype.currentXDelta

The sum of x-displacements for the current iteration

widestRank

mxCoordinateAssignment.prototype.widestRank

The rank that has the widest x position

rankTopY

mxCoordinateAssignment.prototype.rankTopY

Internal cache of top-most values of Y for each rank

rankBottomY

mxCoordinateAssignment.prototype.rankBottomY

Internal cache of bottom-most value of Y for each rank

widestRankValue

mxCoordinateAssignment.prototype.widestRankValue

The X-coordinate of the edge of the widest rank

rankWidths

mxCoordinateAssignment.prototype.rankWidths

The width of all the ranks

rankY

mxCoordinateAssignment.prototype.rankY

The Y-coordinate of all the ranks

fineTuning

mxCoordinateAssignment.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm. Default is true.

nextLayerConnectedCache

mxCoordinateAssignment.prototype.nextLayerConnectedCache

A store of connections to the layer above for speed

previousLayerConnectedCache

mxCoordinateAssignment.prototype.previousLayerConnectedCache

A store of connections to the layer below for speed

groupPadding

mxCoordinateAssignment.prototype.groupPadding

Padding added to resized parents

Functions

execute

mxCoordinateAssignment.prototype.execute = function( parent )

A basic horizontal coordinate assignment algorithm

minNode

mxCoordinateAssignment.prototype.minNode = function( model )

Performs one median positioning sweep in both directions

medianPos

mxCoordinateAssignment.prototype.medianPos = function( i,
model )

Performs one median positioning sweep in one direction

Parameters

i	the iteration of the whole process
model	an internal model of the hierarchical layout

rankMedianPosition

mxCoordinateAssignment.prototype.rankMedianPosition = function( rankValue,
model,
nextRankValue )

Performs median minimisation over one rank.

Parameters

rankValue	the layer number of this rank
model	an internal model of the hierarchical layout
nextRankValue	the layer number whose connected cels are to be laid out relative to

calculatedWeightedValue

mxCoordinateAssignment.prototype.calculatedWeightedValue = function(
currentCell,
collection
)

Calculates the priority the specified cell has based on the type of its cell and the cells it is connected to on the next layer

Parameters

currentCell	the cell whose weight is to be calculated
collection	the cells the specified cell is connected to

medianXValue

mxCoordinateAssignment.prototype.medianXValue = function( connectedCells,
rankValue )

Calculates the median position of the connected cell on the specified rank

Parameters

connectedCells	the cells the candidate connects to on this level
rankValue	the layer number of this rank

initialCoords

mxCoordinateAssignment.prototype.initialCoords = function( facade,
model )

Sets up the layout in an initial positioning. The ranks are all centered as much as possible along the middle vertex in each rank. The other cells are then placed as close as possible on either side.

Parameters

facade	the facade describing the input graph
model	an internal model of the hierarchical layout

rankCoordinates

mxCoordinateAssignment.prototype.rankCoordinates = function( rankValue,
graph,
model )

Sets up the layout in an initial positioning. All the first cells in each rank are moved to the left and the rest of the rank inserted as close together as their size and buffering permits. This method works on just the specified rank.

Parameters

rankValue	the current rank being processed
graph	the facade describing the input graph
model	an internal model of the hierarchical layout

calculateWidestRank

mxCoordinateAssignment.prototype.calculateWidestRank = function( graph,
model )

Calculates the width rank in the hierarchy. Also set the y value of each rank whilst performing the calculation

Parameters

graph	the facade describing the input graph
model	an internal model of the hierarchical layout

minPath

mxCoordinateAssignment.prototype.minPath = function( graph,
model )

Straightens out chains of virtual nodes where possibleacade to those stored after this layout processing step has completed.

Parameters

graph	the facade describing the input graph
model	an internal model of the hierarchical layout

repositionValid

mxCoordinateAssignment.prototype.repositionValid = function( model,
cell,
rank,
position )

Determines whether or not a node may be moved to the specified x position on the specified rank

Parameters

model	the layout model
cell	the cell being analysed
rank	the layer of the cell
position	the x position being sought

setCellLocations

mxCoordinateAssignment.prototype.setCellLocations = function( graph,
model )

Sets the cell locations in the facade to those stored after this layout processing step has completed.

Parameters

graph	the input graph
model	the layout model

localEdgeProcessing

mxCoordinateAssignment.prototype.localEdgeProcessing = function( model )

Separates the x position of edges as they connect to vertices

Parameters

model

the layout model

setEdgePosition

mxCoordinateAssignment.prototype.setEdgePosition = function( cell )

Fixes the control points

setVertexLocation

mxCoordinateAssignment.prototype.setVertexLocation = function( cell )

Fixes the position of the specified vertex.

Parameters

cell	the vertex to position

processReversedEdge

mxCoordinateAssignment.prototype.processReversedEdge = function( graph,
model )

Hook to add additional processing

Parameters

edge	the hierarchical model edge
realEdge	the real edge in the graph

mxSwimlaneOrdering

An implementation of the first stage of the Sugiyama layout. Straightforward longest path calculation of layer assignment

Summary

Functions
mxSwimlaneOrdering	Creates a cycle remover for the given internal model.
Variables
layout	Reference to the enclosing mxHierarchicalLayout.
Functions
execute	Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

Functions

mxSwimlaneOrdering

function mxSwimlaneOrdering( layout )

Creates a cycle remover for the given internal model.

Variables

layout

mxSwimlaneOrdering.prototype.layout

Reference to the enclosing mxHierarchicalLayout.

Functions

execute

mxSwimlaneOrdering.prototype.execute = function( parent )

Takes the graph detail and configuration information within the facade and creates the resulting laid out graph within that facade for further use.

mxHierarchicalLayout

A hierarchical layout algorithm.

Summary

Functions
mxHierarchicalLayout	Constructs a new hierarchical layout algorithm.
Variables
roots	Holds the array of mxCell that this layout contains.
resizeParent	Specifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParent	Specifies if the parent should be moved if resizeParent is enabled.
parentBorder	The border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacing	The spacing buffer added between cells on the same layer.
interRankCellSpacing	The spacing buffer added between cell on adjacent layers.
interHierarchySpacing	The spacing buffer between unconnected hierarchies.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges
orientation	The position of the root node(s) relative to the laid out graph in.
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestors	Whether or not to drill into child cells and layout in reverse group order.
model	The internal mxGraphHierarchyModel formed of the layout.
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgeStyle	The style to apply between cell layers to edge segments
Functions
getModel	Returns the internal mxGraphHierarchyModel for this layout algorithm.
execute	Executes the layout for the children of the specified parent.
findRoots	Returns all visible children in the given parent which do not have incoming edges.
getEdges	Returns the connected edges for the given cell.
getVisibleTerminal	Helper function to return visible terminal for edge allowing for ports
run	The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendants	Creates an array of descendant cells
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetween	Returns the edges between the given source and target.
cycleStage	Executes the cycle stage using mxMinimumCycleRemover.
layeringStage	Implements first stage of a Sugiyama layout.
crossingStage	Executes the crossing stage using mxMedianHybridCrossingReduction.
placementStage	Executes the placement stage using mxCoordinateAssignment.

Functions

mxHierarchicalLayout

function mxHierarchicalLayout( graph,
orientation,
deterministic )

Constructs a new hierarchical layout algorithm.

Arguments

graph	Reference to the enclosing mxGraph.
orientation	Optional constant that defines the orientation of this layout.
deterministic	Optional boolean that specifies if this layout should be deterministic. Default is true.

Variables

roots

mxHierarchicalLayout.prototype.roots

Holds the array of mxCell that this layout contains.

resizeParent

mxHierarchicalLayout.prototype.resizeParent

Specifies if the parent should be resized after the layout so that it contains all the child cells. Default is false. See also parentBorder.

maintainParentLocation

mxHierarchicalLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout. Default is false for backwards compatibility.

moveParent

mxHierarchicalLayout.prototype.moveParent

Specifies if the parent should be moved if resizeParent is enabled. Default is false.

parentBorder

mxHierarchicalLayout.prototype.parentBorder

The border to be added around the children if the parent is to be resized using resizeParent. Default is 0.

intraCellSpacing

mxHierarchicalLayout.prototype.intraCellSpacing

The spacing buffer added between cells on the same layer. Default is 30.

interRankCellSpacing

mxHierarchicalLayout.prototype.interRankCellSpacing

The spacing buffer added between cell on adjacent layers. Default is 50.

interHierarchySpacing

mxHierarchicalLayout.prototype.interHierarchySpacing

The spacing buffer between unconnected hierarchies. Default is 60.

parallelEdgeSpacing

mxHierarchicalLayout.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges

orientation

mxHierarchicalLayout.prototype.orientation

The position of the root node(s) relative to the laid out graph in. Default is mxConstants.DIRECTION_NORTH.

fineTuning

mxHierarchicalLayout.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm. Default is true.

tightenToSource

mxHierarchicalLayout.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

disableEdgeStyle

mxHierarchicalLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.

traverseAncestors

mxHierarchicalLayout.prototype.traverseAncestors

Whether or not to drill into child cells and layout in reverse group order. This also cause the layout to navigate edges whose terminal vertices have different parents but are in the same ancestry chain

model

mxHierarchicalLayout.prototype.model

The internal mxGraphHierarchyModel formed of the layout.

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgeStyle

mxHierarchicalLayout.prototype.edgeStyle

The style to apply between cell layers to edge segments

Functions

getModel

mxHierarchicalLayout.prototype.getModel = function()

Returns the internal mxGraphHierarchyModel for this layout algorithm.

execute

mxHierarchicalLayout.prototype.execute = function( parent,
roots )

Executes the layout for the children of the specified parent.

Parameters

parent	Parent mxCell that contains the children to be laid out.
roots	Optional starting roots of the layout.

findRoots

mxHierarchicalLayout.prototype.findRoots = function( parent,
vertices )

Returns all visible children in the given parent which do not have incoming edges. If the result is empty then the children with the maximum difference between incoming and outgoing edges are returned. This takes into account edges that are being promoted to the given root due to invisible children or collapsed cells.

Parameters

parent	mxCell whose children should be checked.
vertices	array of vertices to limit search to

getEdges

mxHierarchicalLayout.prototype.getEdges = function( cell )

Returns the connected edges for the given cell.

Parameters

cell	mxCell whose edges should be returned.

getVisibleTerminal

mxHierarchicalLayout.prototype.getVisibleTerminal = function( edge,
source )

Helper function to return visible terminal for edge allowing for ports

Parameters

edge	mxCell whose edges should be returned.
source	Boolean that specifies whether the source or target terminal is to be returned

run

mxHierarchicalLayout.prototype.run = function( parent )

The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made. It runs each stage of the layout that has been created.

filterDescendants

mxHierarchicalLayout.prototype.filterDescendants = function( cell,
result )

Creates an array of descendant cells

isPort

mxHierarchicalLayout.prototype.isPort = function( cell )

Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal

Parameters

cell	mxCell that represents the port.

getEdgesBetween

mxHierarchicalLayout.prototype.getEdgesBetween = function( source,
target,
directed )

Returns the edges between the given source and target. This takes into account collapsed and invisible cells and ports.

Parameters

source - target - directed -

cycleStage

mxHierarchicalLayout.prototype.cycleStage = function( parent )

Executes the cycle stage using mxMinimumCycleRemover.

layeringStage

mxHierarchicalLayout.prototype.layeringStage = function()

Implements first stage of a Sugiyama layout.

crossingStage

mxHierarchicalLayout.prototype.crossingStage = function( parent )

Executes the crossing stage using mxMedianHybridCrossingReduction.

placementStage

mxHierarchicalLayout.prototype.placementStage = function( initialX,
parent )

Executes the placement stage using mxCoordinateAssignment.

mxSwimlaneLayout

A hierarchical layout algorithm.

Summary

Functions
mxSwimlaneLayout	Constructs a new hierarchical layout algorithm.
Variables
roots	Holds the array of mxCell that this layout contains.
swimlanes	Holds the array of mxCell of the ordered swimlanes to lay out
dummyVertices	Holds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes
dummyVertexWidth	The cell width of any dummy vertices inserted
resizeParent	Specifies if the parent should be resized after the layout so that it contains all the child cells.
maintainParentLocation	Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout.
moveParent	Specifies if the parent should be moved if resizeParent is enabled.
parentBorder	The border to be added around the children if the parent is to be resized using resizeParent.
intraCellSpacing	The spacing buffer added between cells on the same layer.
interRankCellSpacing	The spacing buffer added between cell on adjacent layers.
interHierarchySpacing	The spacing buffer between unconnected hierarchies.
parallelEdgeSpacing	The distance between each parallel edge on each ranks for long edges
orientation	The position of the root node(s) relative to the laid out graph in.
fineTuning	Whether or not to perform local optimisations and iterate multiple times through the algorithm.
tightenToSource	Whether or not to tighten the assigned ranks of vertices up towards the source cells.
disableEdgeStyle	Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result.
traverseAncestors	Whether or not to drill into child cells and layout in reverse group order.
model	The internal mxSwimlaneModel formed of the layout.
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgesSet	A cache of edges whose source terminal is the key
edgeStyle	The style to apply between cell layers to edge segments
Functions
getModel	Returns the internal mxSwimlaneModel for this layout algorithm.
execute	Executes the layout for the children of the specified parent.
updateGroupBounds	Updates the bounds of the given array of groups so that it includes all child vertices.
findRoots	Returns all visible children in the given parent which do not have incoming edges.
getEdges	Returns the connected edges for the given cell.
getVisibleTerminal	Helper function to return visible terminal for edge allowing for ports
run	The API method used to exercise the layout upon the graph description and produce a separate description of the vertex position and edge routing changes made.
filterDescendants	Creates an array of descendant cells
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal
getEdgesBetween	Returns the edges between the given source and target.
cycleStage	Executes the cycle stage using mxMinimumCycleRemover.
layeringStage	Implements first stage of a Sugiyama layout.
crossingStage	Executes the crossing stage using mxMedianHybridCrossingReduction.
placementStage	Executes the placement stage using mxCoordinateAssignment.

Functions

mxSwimlaneLayout

function mxSwimlaneLayout( graph,
orientation,
deterministic )

Constructs a new hierarchical layout algorithm.

Arguments

graph	Reference to the enclosing mxGraph.
orientation	Optional constant that defines the orientation of this layout.
deterministic	Optional boolean that specifies if this layout should be deterministic. Default is true.

Variables

roots

mxSwimlaneLayout.prototype.roots

Holds the array of mxCell that this layout contains.

swimlanes

mxSwimlaneLayout.prototype.swimlanes

Holds the array of mxCell of the ordered swimlanes to lay out

dummyVertices

mxSwimlaneLayout.prototype.dummyVertices

Holds an array of mxCell of dummy vertices inserted during the layout to pad out empty swimlanes

dummyVertexWidth

mxSwimlaneLayout.prototype.dummyVertexWidth

The cell width of any dummy vertices inserted

resizeParent

mxSwimlaneLayout.prototype.resizeParent

Specifies if the parent should be resized after the layout so that it contains all the child cells. Default is false. See also parentBorder.

maintainParentLocation

mxSwimlaneLayout.prototype.maintainParentLocation

Specifies if the parent location should be maintained, so that the top, left corner stays the same before and after execution of the layout. Default is false for backwards compatibility.

moveParent

mxSwimlaneLayout.prototype.moveParent

Specifies if the parent should be moved if resizeParent is enabled. Default is false.

parentBorder

mxSwimlaneLayout.prototype.parentBorder

The border to be added around the children if the parent is to be resized using resizeParent. Default is 0.

intraCellSpacing

mxSwimlaneLayout.prototype.intraCellSpacing

The spacing buffer added between cells on the same layer. Default is 30.

interRankCellSpacing

mxSwimlaneLayout.prototype.interRankCellSpacing

The spacing buffer added between cell on adjacent layers. Default is 50.

interHierarchySpacing

mxSwimlaneLayout.prototype.interHierarchySpacing

The spacing buffer between unconnected hierarchies. Default is 60.

parallelEdgeSpacing

mxSwimlaneLayout.prototype.parallelEdgeSpacing

The distance between each parallel edge on each ranks for long edges

orientation

mxSwimlaneLayout.prototype.orientation

The position of the root node(s) relative to the laid out graph in. Default is mxConstants.DIRECTION_NORTH.

fineTuning

mxSwimlaneLayout.prototype.fineTuning

Whether or not to perform local optimisations and iterate multiple times through the algorithm. Default is true.

tightenToSource

mxSwimlaneLayout.prototype.tightenToSource

Whether or not to tighten the assigned ranks of vertices up towards the source cells.

disableEdgeStyle

mxSwimlaneLayout.prototype.disableEdgeStyle

Specifies if the STYLE_NOEDGESTYLE flag should be set on edges that are modified by the result. Default is true.

traverseAncestors

mxSwimlaneLayout.prototype.traverseAncestors

Whether or not to drill into child cells and layout in reverse group order. This also cause the layout to navigate edges whose terminal vertices * have different parents but are in the same ancestry chain

model

mxSwimlaneLayout.prototype.model

The internal mxSwimlaneModel formed of the layout.

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgesSet

A cache of edges whose source terminal is the key

edgeStyle

mxHierarchicalLayout.prototype.edgeStyle

The style to apply between cell layers to edge segments

Functions

getModel

mxSwimlaneLayout.prototype.getModel = function()

Returns the internal mxSwimlaneModel for this layout algorithm.

execute

mxSwimlaneLayout.prototype.execute = function( parent,
swimlanes )

Executes the layout for the children of the specified parent.

Parameters

parent	Parent mxCell that contains the children to be laid out.
swimlanes	Ordered array of swimlanes to be laid out

updateGroupBounds

mxSwimlaneLayout.prototype.updateGroupBounds = function()

Updates the bounds of the given array of groups so that it includes all child vertices.

findRoots

mxSwimlaneLayout.prototype.findRoots = function( parent,
vertices )

Parameters

parent	mxCell whose children should be checked.
vertices	array of vertices to limit search to

getEdges

mxSwimlaneLayout.prototype.getEdges = function( cell )

Returns the connected edges for the given cell.

Parameters

cell	mxCell whose edges should be returned.

getVisibleTerminal

mxSwimlaneLayout.prototype.getVisibleTerminal = function( edge,
source )

Helper function to return visible terminal for edge allowing for ports

Parameters

edge	mxCell whose edges should be returned.
source	Boolean that specifies whether the source or target terminal is to be returned

run

mxSwimlaneLayout.prototype.run = function( parent )

filterDescendants

mxSwimlaneLayout.prototype.filterDescendants = function( cell,
result )

Creates an array of descendant cells

isPort

mxSwimlaneLayout.prototype.isPort = function( cell )

Returns true if the given cell is a “port”, that is, when connecting to it, its parent is the connecting vertex in terms of graph traversal

Parameters

cell	mxCell that represents the port.

getEdgesBetween

mxSwimlaneLayout.prototype.getEdgesBetween = function( source,
target,
directed )

Returns the edges between the given source and target. This takes into account collapsed and invisible cells and ports.

Parameters

source - target - directed -

cycleStage

mxSwimlaneLayout.prototype.cycleStage = function( parent )

Executes the cycle stage using mxMinimumCycleRemover.

layeringStage

mxSwimlaneLayout.prototype.layeringStage = function()

Implements first stage of a Sugiyama layout.

crossingStage

mxSwimlaneLayout.prototype.crossingStage = function( parent )

Executes the crossing stage using mxMedianHybridCrossingReduction.

placementStage

mxSwimlaneLayout.prototype.placementStage = function( initialX,
parent )

Executes the placement stage using mxCoordinateAssignment.

mxGraphModel

Extends mxEventSource to implement a graph model. The graph model acts as a wrapper around the cells which are in charge of storing the actual graph datastructure. The model acts as a transactional wrapper with event notification for all changes, whereas the cells contain the atomic operations for updating the actual datastructure.

Layers

The cell hierarchy in the model must have a top-level root cell which contains the layers (typically one default layer), which in turn contain the top-level cells of the layers. This means each cell is contained in a layer. If no layers are required, then all new cells should be added to the default layer.

Layers are useful for hiding and showing groups of cells, or for placing groups of cells on top of other cells in the display. To identify a layer, the isLayer function is used. It returns true if the parent of the given cell is the root of the model.

Events

See events section for more details. There is a new set of events for tracking transactional changes as they happen. The events are called startEdit for the initial beginUpdate, executed for each executed change and endEdit for the terminal endUpdate. The executed event contains a property called change which represents the change after execution.

Encoding the model

To encode a graph model, use the following code

var enc = new mxCodec();
var node = enc.encode(graph.getModel());

This will create an XML node that contains all the model information.

Encoding and decoding changes

For the encoding of changes, a graph model listener is required that encodes each change from the given array of changes.

model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;
  var nodes = [];
  var codec = new mxCodec();

  for (var i = 0; i < changes.length; i++)
  {
    nodes.push(codec.encode(changes[i]));
  }
  // do something with the nodes
});

For the decoding and execution of changes, the codec needs a lookup function that allows it to resolve cell IDs as follows:

var codec = new mxCodec();
codec.lookup = function(id)
{
  return model.getCell(id);
}

For each encoded change (represented by a node), the following code can be used to carry out the decoding and create a change object.

var changes = [];
var change = codec.decode(node);
change.model = model;
change.execute();
changes.push(change);

The changes can then be dispatched using the model as follows.

var edit = new mxUndoableEdit(model, false);
edit.changes = changes;

edit.notify = function()
{
  edit.source.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', edit.changes));
  edit.source.fireEvent(new mxEventObject(mxEvent.NOTIFY,
     'edit', edit, 'changes', edit.changes));
}

model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
model.fireEvent(new mxEventObject(mxEvent.CHANGE,
     'edit', edit, 'changes', changes));

Summary

Events
mxEvent.CHANGE	Fires when an undoable edit is dispatched.
mxEvent.NOTIFY	Same as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model.
mxEvent.EXECUTE	Fires between begin- and endUpdate and after an atomic change was executed in the model.
mxEvent.EXECUTED	Fires between START_EDIT and END_EDIT after an atomic change was executed.
mxEvent.BEGIN_UPDATE	Fires after the updateLevel was incremented in beginUpdate.
mxEvent.START_EDIT	Fires after the updateLevel was changed from 0 to 1.
mxEvent.END_UPDATE	Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching.
mxEvent.END_EDIT	Fires after the updateLevel was changed from 1 to 0.
mxEvent.BEFORE_UNDO	Fires before the change is dispatched after the update level has reached 0 in endUpdate.
mxEvent.UNDO	Fires after the change was dispatched in endUpdate.
Functions
mxGraphModel	Constructs a new graph model.
Variables
root	Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells.
cells	Maps from Ids to cells.
maintainEdgeParent	Specifies if edges should automatically be moved into the nearest common ancestor of their terminals.
ignoreRelativeEdgeParent	Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals.
createIds	Specifies if the model should automatically create Ids for new cells.
prefix	Defines the prefix of new Ids.
postfix	Defines the postfix of new Ids.
nextId	Specifies the next Id to be created.
currentEdit	Holds the changes for the current transaction.
updateLevel	Counter for the depth of nested transactions.
endingUpdate	True if the program flow is currently inside endUpdate.
Functions
clear	Sets a new root using createRoot.
isCreateIds	Returns createIds.
setCreateIds	Sets createIds.
createRoot	Creates a new root cell with a default layer (child 0).
getCell	Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
filterCells	Returns the cells from the given array where the given filter function returns true.
getDescendants	Returns all descendants of the given cell and the cell itself in an array.
filterDescendants	Visits all cells recursively and applies the specified filter function to each cell.
getRoot	Returns the root of the model or the topmost parent of the given cell.
setRoot	Sets the root of the model using mxRootChange and adds the change to the current transaction.
rootChanged	Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId.
isRoot	Returns true if the given cell is the root of the model and a non-null value.
isLayer	Returns true if isRoot returns true for the parent of the given cell.
isAncestor	Returns true if the given parent is an ancestor of the given child.
contains	Returns true if the model contains the given mxCell.
getParent	Returns the parent of the given cell.
add	Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction.
cellAdded	Inner callback to update cells when a cell has been added.
createId	Hook method to create an Id for the specified cell.
updateEdgeParents	Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.
updateEdgeParent	Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.
getOrigin	Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.
getNearestCommonAncestor	Returns the nearest common ancestor for the specified cells.
remove	Removes the specified cell from the model using mxChildChange and adds the change to the current transaction.
cellRemoved	Inner callback to update cells when a cell has been removed.
parentForCellChanged	Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.
getChildCount	Returns the number of children in the given cell.
getChildAt	Returns the child of the given mxCell at the given index.
getChildren	Returns all children of the given mxCell as an array of mxCells.
getChildVertices	Returns the child vertices of the given parent.
getChildEdges	Returns the child edges of the given parent.
getChildCells	Returns the children of the given cell that are vertices and/or edges depending on the arguments.
getTerminal	Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.
setTerminal	Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction.
setTerminals	Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.
terminalForCellChanged	Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.
getEdgeCount	Returns the number of distinct edges connected to the given cell.
getEdgeAt	Returns the edge of cell at the given index.
getDirectedEdgeCount	Returns the number of incoming or outgoing edges, ignoring the given edge.
getConnections	Returns all edges of the given cell without loops.
getIncomingEdges	Returns the incoming edges of the given cell without loops.
getOutgoingEdges	Returns the outgoing edges of the given cell without loops.
getEdges	Returns all distinct edges connected to this cell as a new array of mxCells.
getEdgesBetween	Returns all edges between the given source and target pair.
getOpposites	Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified.
getTopmostCells	Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains.
isVertex	Returns true if the given cell is a vertex.
isEdge	Returns true if the given cell is an edge.
isConnectable	Returns true if the given mxCell is connectable.
getValue	Returns the user object of the given mxCell using mxCell.getValue.
setValue	Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.
valueForCellChanged	Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.
getGeometry	Returns the mxGeometry of the given mxCell.
setGeometry	Sets the mxGeometry of the given mxCell.
geometryForCellChanged	Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.
getStyle	Returns the style of the given mxCell.
setStyle	Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.
styleForCellChanged	Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.
isCollapsed	Returns true if the given mxCell is collapsed.
setCollapsed	Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.
collapsedStateForCellChanged	Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.
isVisible	Returns true if the given mxCell is visible.
setVisible	Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.
visibleStateForCellChanged	Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.
execute	Executes the given edit and fires events if required.
beginUpdate	Increments the updateLevel by one.
endUpdate	Decrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0.
createUndoableEdit	Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.
mergeChildren	Merges the children of the given cell into the given target cell inside this model.
mergeChildren	Clones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.
getParents	Returns an array that represents the set (no duplicates) of all parents for the given array of cells.
cloneCell	Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.
cloneCells	Returns an array of clones for the given array of mxCells.
cloneCellImpl	Inner helper method for cloning cells recursively.
cellCloned	Hook for cloning the cell.
restoreClone	Inner helper method for restoring the connections in a network of cloned cells.

Events

mxEvent.CHANGE

Fires when an undoable edit is dispatched. The <code>edit</code> property contains the mxUndoableEdit. The <code>changes</code> property contains the array of atomic changes inside the undoable edit. The changes property is <strong>deprecated</strong>, please use edit.changes instead.

Example

For finding newly inserted cells, the following code can be used

graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
{
  var changes = evt.getProperty('edit').changes;

  for (var i = 0; i < changes.length; i++)
  {
    var change = changes[i];

    if (change instanceof mxChildChange &&
      change.change.previous == null)
    {
      graph.startEditingAtCell(change.child);
      break;
    }
  }
});

mxEvent.NOTIFY

Same as mxEvent.CHANGE, this event can be used for classes that need to implement a sync mechanism between this model and, say, a remote model. In such a setup, only local changes should trigger a notify event and all changes should trigger a change event.

mxEvent.EXECUTE

Fires between begin- and endUpdate and after an atomic change was executed in the model. The <code>change</code> property contains the atomic change that was executed.

mxEvent.EXECUTED

Fires between START_EDIT and END_EDIT after an atomic change was executed. The <code>change</code> property contains the change that was executed.

mxEvent.BEGIN_UPDATE

Fires after the updateLevel was incremented in beginUpdate. This event contains no properties.

mxEvent.START_EDIT

Fires after the updateLevel was changed from 0 to 1. This event contains no properties.

mxEvent.END_UPDATE

Fires after the updateLevel was decreased in endUpdate but before any notification or change dispatching. The <code>edit</code> property contains the currentEdit.

mxEvent.END_EDIT

Fires after the updateLevel was changed from 1 to 0. This event contains no properties.

mxEvent.BEFORE_UNDO

Fires before the change is dispatched after the update level has reached 0 in endUpdate. The <code>edit</code> property contains the <curreneEdit>.

mxEvent.UNDO

Fires after the change was dispatched in endUpdate. The <code>edit</code> property contains the currentEdit.

Functions

mxGraphModel

function mxGraphModel( root )

Constructs a new graph model. If no root is specified then a new root mxCell with a default layer is created.

Parameters

root	mxCell that represents the root cell.

Variables

root

mxGraphModel.prototype.root

Holds the root cell, which in turn contains the cells that represent the layers of the diagram as child cells. That is, the actual elements of the diagram are supposed to live in the third generation of cells and below.

cells

mxGraphModel.prototype.cells

Maps from Ids to cells.

maintainEdgeParent

mxGraphModel.prototype.maintainEdgeParent

Specifies if edges should automatically be moved into the nearest common ancestor of their terminals. Default is true.

ignoreRelativeEdgeParent

mxGraphModel.prototype.ignoreRelativeEdgeParent

Specifies if relative edge parents should be ignored for finding the nearest common ancestors of an edge’s terminals. Default is true.

createIds

mxGraphModel.prototype.createIds

Specifies if the model should automatically create Ids for new cells. Default is true.

prefix

mxGraphModel.prototype.prefix

Defines the prefix of new Ids. Default is an empty string.

postfix

mxGraphModel.prototype.postfix

Defines the postfix of new Ids. Default is an empty string.

nextId

mxGraphModel.prototype.nextId

Specifies the next Id to be created. Initial value is 0.

currentEdit

mxGraphModel.prototype.currentEdit

Holds the changes for the current transaction. If the transaction is closed then a new object is created for this variable using createUndoableEdit.

updateLevel

mxGraphModel.prototype.updateLevel

Counter for the depth of nested transactions. Each call to beginUpdate will increment this number and each call to endUpdate will decrement it. When the counter reaches 0, the transaction is closed and the respective events are fired. Initial value is 0.

endingUpdate

mxGraphModel.prototype.endingUpdate

True if the program flow is currently inside endUpdate.

Functions

clear

mxGraphModel.prototype.clear = function()

Sets a new root using createRoot.

isCreateIds

mxGraphModel.prototype.isCreateIds = function()

Returns createIds.

setCreateIds

mxGraphModel.prototype.setCreateIds = function( value )

Sets createIds.

createRoot

mxGraphModel.prototype.createRoot = function()

Creates a new root cell with a default layer (child 0).

getCell

mxGraphModel.prototype.getCell = function( id )

Returns the mxCell for the specified Id or null if no cell can be found for the given Id.

Parameters

id	A string representing the Id of the cell.

filterCells

mxGraphModel.prototype.filterCells = function( cells,
filter )

Returns the cells from the given array where the given filter function returns true.

getDescendants

mxGraphModel.prototype.getDescendants = function( parent )

Returns all descendants of the given cell and the cell itself in an array.

Parameters

parent

mxCell whose descendants should be returned.

filterDescendants

mxGraphModel.prototype.filterDescendants = function( filter,
parent )

Visits all cells recursively and applies the specified filter function to each cell. If the function returns true then the cell is added to the resulting array. The parent and result paramters are optional. If parent is not specified then the recursion starts at root.

Example

The following example extracts all vertices from a given model:

var filter = function(cell)
{
 return model.isVertex(cell);
}
var vertices = model.filterDescendants(filter);

Parameters

filter	JavaScript function that takes an mxCell as an argument and returns a boolean.
parent	Optional mxCell that is used as the root of the recursion.

getRoot

mxGraphModel.prototype.getRoot = function( cell )

Returns the root of the model or the topmost parent of the given cell.

Parameters

cell	Optional mxCell that specifies the child.

setRoot

mxGraphModel.prototype.setRoot = function( root )

Sets the root of the model using mxRootChange and adds the change to the current transaction. This resets all datastructures in the model and is the preferred way of clearing an existing model. Returns the new root.

Example

var root = new mxCell();
root.insert(new mxCell());
model.setRoot(root);

Parameters

root	mxCell that specifies the new root.

rootChanged

mxGraphModel.prototype.rootChanged = function( root )

Inner callback to change the root of the model and update the internal datastructures, such as cells and nextId. Returns the previous root.

Parameters

root	mxCell that specifies the new root.

isRoot

mxGraphModel.prototype.isRoot = function( cell )

Returns true if the given cell is the root of the model and a non-null value.

Parameters

cell	mxCell that represents the possible root.

isLayer

mxGraphModel.prototype.isLayer = function( cell )

Returns true if isRoot returns true for the parent of the given cell.

Parameters

cell	mxCell that represents the possible layer.

isAncestor

mxGraphModel.prototype.isAncestor = function( parent,
child )

Returns true if the given parent is an ancestor of the given child. Note returns true if child == parent.

Parameters

parent	mxCell that specifies the parent.
child	mxCell that specifies the child.

contains

mxGraphModel.prototype.contains = function( cell )

Returns true if the model contains the given mxCell.

Parameters

cell	mxCell that specifies the cell.

getParent

mxGraphModel.prototype.getParent = function( cell )

Returns the parent of the given cell.

Parameters

cell	mxCell whose parent should be returned.

add

mxGraphModel.prototype.add = function( parent,
child,
index )

Adds the specified child to the parent at the given index using mxChildChange and adds the change to the current transaction. If no index is specified then the child is appended to the parent’s array of children. Returns the inserted child.

Parameters

parent	mxCell that specifies the parent to contain the child.
child	mxCell that specifies the child to be inserted.
index	Optional integer that specifies the index of the child.

cellAdded

mxGraphModel.prototype.cellAdded = function( cell )

Inner callback to update cells when a cell has been added. This implementation resolves collisions by creating new Ids. To change the ID of a cell after it was inserted into the model, use the following code:

(code delete model.cells[cell.getId()]; cell.setId(newId); model.cells[cell.getId()] = cell; (end)

If the change of the ID should be part of the command history, then the cell should be removed from the model and a clone with the new ID should be reinserted into the model instead.

Parameters

cell	mxCell that specifies the cell that has been added.

createId

mxGraphModel.prototype.createId = function( cell )

Hook method to create an Id for the specified cell. This implementation concatenates prefix, id and postfix to create the Id and increments nextId. The cell is ignored by this implementation, but can be used in overridden methods to prefix the Ids with eg. the cell type.

Parameters

cell	mxCell to create the Id for.

updateEdgeParents

mxGraphModel.prototype.updateEdgeParents = function( cell,
root )

Updates the parent for all edges that are connected to cell or one of its descendants using updateEdgeParent.

updateEdgeParent

mxGraphModel.prototype.updateEdgeParent = function( edge,
root )

Inner callback to update the parent of the specified mxCell to the nearest-common-ancestor of its two terminals.

Parameters

edge	mxCell that specifies the edge.
root	mxCell that represents the current root of the model.

getOrigin

mxGraphModel.prototype.getOrigin = function( cell )

Returns the absolute, accumulated origin for the children inside the given parent as an mxPoint.

getNearestCommonAncestor

mxGraphModel.prototype.getNearestCommonAncestor = function( cell1,
cell2 )

Returns the nearest common ancestor for the specified cells.

Parameters

cell1	mxCell that specifies the first cell in the tree.
cell2	mxCell that specifies the second cell in the tree.

remove

mxGraphModel.prototype.remove = function( cell )

Removes the specified cell from the model using mxChildChange and adds the change to the current transaction. This operation will remove the cell and all of its children from the model. Returns the removed cell.

Parameters

cell	mxCell that should be removed.

cellRemoved

mxGraphModel.prototype.cellRemoved = function( cell )

Inner callback to update cells when a cell has been removed.

Parameters

cell	mxCell that specifies the cell that has been removed.

parentForCellChanged

mxGraphModel.prototype.parentForCellChanged = function( cell,
parent,
index )

Inner callback to update the parent of a cell using mxCell.insert on the parent and return the previous parent.

Parameters

cell	mxCell to update the parent for.
parent	mxCell that specifies the new parent of the cell.
index	Optional integer that defines the index of the child in the parent’s child array.

getChildCount

mxGraphModel.prototype.getChildCount = function( cell )

Returns the number of children in the given cell.

Parameters

cell	mxCell whose number of children should be returned.

getChildAt

mxGraphModel.prototype.getChildAt = function( cell,
index )

Returns the child of the given mxCell at the given index.

Parameters

cell	mxCell that represents the parent.
index	Integer that specifies the index of the child to be returned.

getChildren

mxGraphModel.prototype.getChildren = function( cell )

Returns all children of the given mxCell as an array of mxCells. The return value should be only be read.

Parameters

cell	mxCell the represents the parent.

getChildVertices

mxGraphModel.prototype.getChildVertices = function( parent )

Returns the child vertices of the given parent.

Parameters

cell	mxCell whose child vertices should be returned.

getChildEdges

mxGraphModel.prototype.getChildEdges = function( parent )

Returns the child edges of the given parent.

Parameters

cell	mxCell whose child edges should be returned.

getChildCells

mxGraphModel.prototype.getChildCells = function( parent,
vertices,
edges )

Returns the children of the given cell that are vertices and/or edges depending on the arguments.

Parameters

cell	mxCell the represents the parent.
vertices	Boolean indicating if child vertices should be returned. Default is false.
edges	Boolean indicating if child edges should be returned. Default is false.

getTerminal

mxGraphModel.prototype.getTerminal = function( edge,
isSource )

Returns the source or target mxCell of the given edge depending on the value of the boolean parameter.

Parameters

edge	mxCell that specifies the edge.
isSource	Boolean indicating which end of the edge should be returned.

setTerminal

mxGraphModel.prototype.setTerminal = function( edge,
terminal,
isSource )

Sets the source or target terminal of the given mxCell using mxTerminalChange and adds the change to the current transaction. This implementation updates the parent of the edge using updateEdgeParent if required.

Parameters

edge	mxCell that specifies the edge.
terminal	mxCell that specifies the new terminal.
isSource	Boolean indicating if the terminal is the new source or target terminal of the edge.

setTerminals

mxGraphModel.prototype.setTerminals = function( edge,
source,
target )

Sets the source and target mxCell of the given mxCell in a single transaction using setTerminal for each end of the edge.

Parameters

edge	mxCell that specifies the edge.
source	mxCell that specifies the new source terminal.
target	mxCell that specifies the new target terminal.

terminalForCellChanged

mxGraphModel.prototype.terminalForCellChanged = function( edge,
terminal,
isSource )

Inner helper function to update the terminal of the edge using mxCell.insertEdge and return the previous terminal.

Parameters

edge	mxCell that specifies the edge to be updated.
terminal	mxCell that specifies the new terminal.
isSource	Boolean indicating if the terminal is the new source or target terminal of the edge.

getEdgeCount

mxGraphModel.prototype.getEdgeCount = function( cell )

Returns the number of distinct edges connected to the given cell.

Parameters

cell	mxCell that represents the vertex.

getEdgeAt

mxGraphModel.prototype.getEdgeAt = function( cell,
index )

Returns the edge of cell at the given index.

Parameters

cell	mxCell that specifies the vertex.
index	Integer that specifies the index of the edge to return.

getDirectedEdgeCount

mxGraphModel.prototype.getDirectedEdgeCount = function( cell,
outgoing,
ignoredEdge )

Returns the number of incoming or outgoing edges, ignoring the given edge.

Parameters

cell	mxCell whose edge count should be returned.
outgoing	Boolean that specifies if the number of outgoing or incoming edges should be returned.
ignoredEdge	mxCell that represents an edge to be ignored.

getConnections

mxGraphModel.prototype.getConnections = function( cell )

Returns all edges of the given cell without loops.

Parameters

cell	mxCell whose edges should be returned.

getIncomingEdges

mxGraphModel.prototype.getIncomingEdges = function( cell )

Returns the incoming edges of the given cell without loops.

Parameters

cell	mxCell whose incoming edges should be returned.

getOutgoingEdges

mxGraphModel.prototype.getOutgoingEdges = function( cell )

Returns the outgoing edges of the given cell without loops.

Parameters

cell	mxCell whose outgoing edges should be returned.

getEdges

mxGraphModel.prototype.getEdges = function( cell,
incoming,
outgoing,
includeLoops )

Returns all distinct edges connected to this cell as a new array of mxCells. If at least one of incoming or outgoing is true, then loops are ignored, otherwise if both are false, then all edges connected to the given cell are returned including loops.

Parameters

cell	mxCell that specifies the cell.
incoming	Optional boolean that specifies if incoming edges should be returned. Default is true.
outgoing	Optional boolean that specifies if outgoing edges should be returned. Default is true.
includeLoops	Optional boolean that specifies if loops should be returned. Default is true.

getEdgesBetween

mxGraphModel.prototype.getEdgesBetween = function( source,
target,
directed )

Returns all edges between the given source and target pair. If directed is true, then only edges from the source to the target are returned, otherwise, all edges between the two cells are returned.

Parameters

source	mxCell that defines the source terminal of the edge to be returned.
target	mxCell that defines the target terminal of the edge to be returned.
directed	Optional boolean that specifies if the direction of the edge should be taken into account. Default is false.

getOpposites

mxGraphModel.prototype.getOpposites = function( edges,
terminal,
sources,
targets )

Returns all opposite vertices wrt terminal for the given edges, only returning sources and/or targets as specified. The result is returned as an array of mxCells.

Parameters

edges	Array of mxCells that contain the edges to be examined.
terminal	mxCell that specifies the known end of the edges.
sources	Boolean that specifies if source terminals should be contained in the result. Default is true.
targets	Boolean that specifies if target terminals should be contained in the result. Default is true.

getTopmostCells

mxGraphModel.prototype.getTopmostCells = function( cells )

Returns the topmost cells of the hierarchy in an array that contains no descendants for each mxCell that it contains. Duplicates should be removed in the cells array to improve performance.

Parameters

cells

Array of mxCells whose topmost ancestors should be returned.

isVertex

mxGraphModel.prototype.isVertex = function( cell )

Returns true if the given cell is a vertex.

Parameters

cell	mxCell that represents the possible vertex.

isEdge

mxGraphModel.prototype.isEdge = function( cell )

Returns true if the given cell is an edge.

Parameters

cell	mxCell that represents the possible edge.

isConnectable

mxGraphModel.prototype.isConnectable = function( cell )

Returns true if the given mxCell is connectable. If <edgesConnectable> is false, then this function returns false for all edges else it returns the return value of mxCell.isConnectable.

Parameters

cell	mxCell whose connectable state should be returned.

getValue

mxGraphModel.prototype.getValue = function( cell )

Returns the user object of the given mxCell using mxCell.getValue.

Parameters

cell	mxCell whose user object should be returned.

setValue

mxGraphModel.prototype.setValue = function( cell,
value )

Sets the user object of then given mxCell using mxValueChange and adds the change to the current transaction.

Parameters

cell	mxCell whose user object should be changed.
value	Object that defines the new user object.

valueForCellChanged

mxGraphModel.prototype.valueForCellChanged = function( cell,
value )

Inner callback to update the user object of the given mxCell using mxCell.valueChanged and return the previous value, that is, the return value of mxCell.valueChanged.

To change a specific attribute in an XML node, the following code can be used.

graph.getModel().valueForCellChanged = function(cell, value)
{
  var previous = cell.value.getAttribute('label');
  cell.value.setAttribute('label', value);

  return previous;
};

getGeometry

mxGraphModel.prototype.getGeometry = function( cell )

Returns the mxGeometry of the given mxCell.

Parameters

cell	mxCell whose geometry should be returned.

setGeometry

mxGraphModel.prototype.setGeometry = function( cell,
geometry )

Sets the mxGeometry of the given mxCell. The actual update of the cell is carried out in geometryForCellChanged. The mxGeometryChange action is used to encapsulate the change.

Parameters

cell	mxCell whose geometry should be changed.
geometry	mxGeometry that defines the new geometry.

geometryForCellChanged

mxGraphModel.prototype.geometryForCellChanged = function( cell,
geometry )

Inner callback to update the mxGeometry of the given mxCell using mxCell.setGeometry and return the previous mxGeometry.

getStyle

mxGraphModel.prototype.getStyle = function( cell )

Returns the style of the given mxCell.

Parameters

cell	mxCell whose style should be returned.

setStyle

mxGraphModel.prototype.setStyle = function( cell,
style )

Sets the style of the given mxCell using mxStyleChange and adds the change to the current transaction.

Parameters

cell	mxCell whose style should be changed.
style	String of the form [stylename;\|key=value;] to specify the new cell style.

styleForCellChanged

mxGraphModel.prototype.styleForCellChanged = function( cell,
style )

Inner callback to update the style of the given mxCell using mxCell.setStyle and return the previous style.

Parameters

cell	mxCell that specifies the cell to be updated.
style	String of the form [stylename;\|key=value;] to specify the new cell style.

isCollapsed

mxGraphModel.prototype.isCollapsed = function( cell )

Returns true if the given mxCell is collapsed.

Parameters

cell	mxCell whose collapsed state should be returned.

setCollapsed

mxGraphModel.prototype.setCollapsed = function( cell,
collapsed )

Sets the collapsed state of the given mxCell using mxCollapseChange and adds the change to the current transaction.

Parameters

cell	mxCell whose collapsed state should be changed.
collapsed	Boolean that specifies the new collpased state.

collapsedStateForCellChanged

mxGraphModel.prototype.collapsedStateForCellChanged = function( cell,
collapsed )

Inner callback to update the collapsed state of the given mxCell using mxCell.setCollapsed and return the previous collapsed state.

Parameters

cell	mxCell that specifies the cell to be updated.
collapsed	Boolean that specifies the new collpased state.

isVisible

mxGraphModel.prototype.isVisible = function( cell )

Returns true if the given mxCell is visible.

Parameters

cell	mxCell whose visible state should be returned.

setVisible

mxGraphModel.prototype.setVisible = function( cell,
visible )

Sets the visible state of the given mxCell using mxVisibleChange and adds the change to the current transaction.

Parameters

cell	mxCell whose visible state should be changed.
visible	Boolean that specifies the new visible state.

visibleStateForCellChanged

mxGraphModel.prototype.visibleStateForCellChanged = function( cell,
visible )

Inner callback to update the visible state of the given mxCell using mxCell.setCollapsed and return the previous visible state.

Parameters

cell	mxCell that specifies the cell to be updated.
visible	Boolean that specifies the new visible state.

execute

mxGraphModel.prototype.execute = function( change )

Executes the given edit and fires events if required. The edit object requires an execute function which is invoked. The edit is added to the currentEdit between beginUpdate and endUpdate calls, so that events will be fired if this execute is an individual transaction, that is, if no previous beginUpdate calls have been made without calling endUpdate. This implementation fires an execute event before executing the given change.

Parameters

change

Object that described the change.

beginUpdate

mxGraphModel.prototype.beginUpdate = function()

Increments the updateLevel by one. The event notification is queued until updateLevel reaches 0 by use of endUpdate.

All changes on mxGraphModel are transactional, that is, they are executed in a single undoable change on the model (without transaction isolation). Therefore, if you want to combine any number of changes into a single undoable change, you should group any two or more API calls that modify the graph model between beginUpdate and endUpdate calls as shown here:

var model = graph.getModel();
var parent = graph.getDefaultParent();
var index = model.getChildCount(parent);
model.beginUpdate();
try
{
  model.add(parent, v1, index);
  model.add(parent, v2, index+1);
}
finally
{
  model.endUpdate();
}

Of course there is a shortcut for appending a sequence of cells into the default parent:

graph.addCells([v1, v2]).

endUpdate

mxGraphModel.prototype.endUpdate = function()

Decrements the updateLevel by one and fires an <undo> event if the updateLevel reaches 0. This function indirectly fires a <change> event by invoking the notify function on the currentEdit und then creates a new currentEdit using createUndoableEdit.

The <undo> event is fired only once per edit, whereas the <change> event is fired whenever the notify function is invoked, that is, on undo and redo of the edit.

createUndoableEdit

mxGraphModel.prototype.createUndoableEdit = function( significant )

Creates a new mxUndoableEdit that implements the notify function to fire a <change> and <notify> event through the mxUndoableEdit’s source.

Parameters

significant

Optional boolean that specifies if the edit to be created is significant. Default is true.

mergeChildren

mxGraphModel.prototype.mergeChildren = function( from,
to,
cloneAllEdges )

Merges the children of the given cell into the given target cell inside this model. All cells are cloned unless there is a corresponding cell in the model with the same id, in which case the source cell is ignored and all edges are connected to the corresponding cell in this model. Edges are considered to have no identity and are always cloned unless the cloneAllEdges flag is set to false, in which case edges with the same id in the target model are reconnected to reflect the terminals of the source edges.

mergeChildren

mxGraphModel.prototype.mergeChildrenImpl = function( from,
to,
cloneAllEdges,
mapping )

Clones the children of the source cell into the given target cell in this model and adds an entry to the mapping that maps from the source cell to the target cell with the same id or the clone of the source cell that was inserted into this model.

getParents

mxGraphModel.prototype.getParents = function( cells )

Returns an array that represents the set (no duplicates) of all parents for the given array of cells.

Parameters

cells

Array of cells whose parents should be returned.

cloneCell

mxGraphModel.prototype.cloneCell = function( cell )

Returns a deep clone of the given mxCell (including the children) which is created using cloneCells.

Parameters

cell	mxCell to be cloned.

cloneCells

mxGraphModel.prototype.cloneCells = function( cells,
includeChildren,
mapping )

Returns an array of clones for the given array of mxCells. Depending on the value of includeChildren, a deep clone is created for each cell. Connections are restored based if the corresponding cell is contained in the passed in array.

Parameters

cells	Array of mxCell to be cloned.
includeChildren	Boolean indicating if the cells should be cloned with all descendants.
mapping	Optional mapping for existing clones.

cloneCellImpl

mxGraphModel.prototype.cloneCellImpl = function( cell,
mapping,
includeChildren )

Inner helper method for cloning cells recursively.

cellCloned

mxGraphModel.prototype.cellCloned = function( cell )

Hook for cloning the cell. This returns cell.clone() or any possible exceptions.

restoreClone

mxGraphModel.prototype.restoreClone = function( clone,
cell,
mapping )

Inner helper method for restoring the connections in a network of cloned cells.

mxRootChange

Action to change the root in a model.

Summary

Functions
mxRootChange	Constructs a change of the root in the specified model.
execute	Carries out a change of the root using mxGraphModel.rootChanged.

Functions

mxRootChange

function mxRootChange( model,
root )

Constructs a change of the root in the specified model.

execute

mxRootChange.prototype.execute = function()

Carries out a change of the root using mxGraphModel.rootChanged.

mxChildChange

Action to add or remove a child in a model.

Summary

Functions
mxChildChange	Constructs a change of a child in the specified model.
execute	Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.
disconnect	Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

Functions

mxChildChange

function mxChildChange( model,
parent,
child,
index )

Constructs a change of a child in the specified model.

execute

mxChildChange.prototype.execute = function()

Changes the parent of <child> using mxGraphModel.parentForCellChanged and removes or restores the cell’s connections.

disconnect

Disconnects the given cell recursively from its terminals and stores the previous terminal in the cell’s terminals.

mxTerminalChange

Action to change a terminal in a model.

Summary

Functions
mxTerminalChange	Constructs a change of a terminal in the specified model.
execute	Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

Functions

mxTerminalChange

function mxTerminalChange( model,
cell,
terminal,
source )

Constructs a change of a terminal in the specified model.

execute

mxTerminalChange.prototype.execute = function()

Changes the terminal of <cell> to <previous> using mxGraphModel.terminalForCellChanged.

mxValueChange

Action to change a user object in a model.

Summary

Functions
mxValueChange	Constructs a change of a user object in the specified model.
execute	Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

Functions

mxValueChange

function mxValueChange( model,
cell,
value )

Constructs a change of a user object in the specified model.

execute

mxValueChange.prototype.execute = function()

Changes the value of <cell> to <previous> using mxGraphModel.valueForCellChanged.

mxStyleChange

Action to change a cell’s style in a model.

Summary

Functions
mxStyleChange	Constructs a change of a style in the specified model.
execute	Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

Functions

mxStyleChange

function mxStyleChange( model,
cell,
style )

Constructs a change of a style in the specified model.

execute

mxStyleChange.prototype.execute = function()

Changes the style of <cell> to <previous> using mxGraphModel.styleForCellChanged.

mxGeometryChange

Action to change a cell’s geometry in a model.

Summary

Functions
mxGeometryChange	Constructs a change of a geometry in the specified model.
execute	Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

Functions

mxGeometryChange

function mxGeometryChange( model,
cell,
geometry )

Constructs a change of a geometry in the specified model.

execute

mxGeometryChange.prototype.execute = function()

Changes the geometry of <cell> ro <previous> using mxGraphModel.geometryForCellChanged.

mxCollapseChange

Action to change a cell’s collapsed state in a model.

Summary

Functions
mxCollapseChange	Constructs a change of a collapsed state in the specified model.
execute	Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

Functions

mxCollapseChange

function mxCollapseChange( model,
cell,
collapsed )

Constructs a change of a collapsed state in the specified model.

execute

mxCollapseChange.prototype.execute = function()

Changes the collapsed state of <cell> to <previous> using mxGraphModel.collapsedStateForCellChanged.

mxVisibleChange

Action to change a cell’s visible state in a model.

Summary

Functions
mxVisibleChange	Constructs a change of a visible state in the specified model.
execute	Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

Functions

mxVisibleChange

function mxVisibleChange( model,
cell,
visible )

Constructs a change of a visible state in the specified model.

execute

mxVisibleChange.prototype.execute = function()

Changes the visible state of <cell> to <previous> using mxGraphModel.visibleStateForCellChanged.

mxCellAttributeChange

Action to change the attribute of a cell’s user object. There is no method on the graph model that uses this action. To use the action, you can use the code shown in the example below.

Example

To change the attributeName in the cell’s user object to attributeValue, use the following code:

model.beginUpdate();
try
{
  var edit = new mxCellAttributeChange(
    cell, attributeName, attributeValue);
  model.execute(edit);
}
finally
{
  model.endUpdate();
}

Summary

Functions
mxCellAttributeChange	Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.
execute	Changes the attribute of the cell’s user object by using mxCell.setAttribute.

Functions

mxCellAttributeChange

function mxCellAttributeChange( cell,
attribute,
value )

Constructs a change of a attribute of the DOM node stored as the value of the given mxCell.

execute

mxCellAttributeChange.prototype.execute = function()

Changes the attribute of the cell’s user object by using mxCell.setAttribute.

mxCell

Cells are the elements of the graph model. They represent the state of the groups, vertices and edges in a graph.

Custom attributes

For custom attributes we recommend using an XML node as the value of a cell. The following code can be used to create a cell with an XML node as the value:

var doc = mxUtils.createXmlDocument();
var node = doc.createElement('MyNode')
node.setAttribute('label', 'MyLabel');
node.setAttribute('attribute1', 'value1');
graph.insertVertex(graph.getDefaultParent(), null, node, 40, 40, 80, 30);

For the label to work, mxGraph.convertValueToString and mxGraph.cellLabelChanged should be overridden as follows:

graph.convertValueToString = function(cell)
{
  if (mxUtils.isNode(cell.value))
  {
    return cell.getAttribute('label', '')
  }
};

var cellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
  if (mxUtils.isNode(cell.value))
  {
    // Clones the value for correct undo/redo
    var elt = cell.value.cloneNode(true);
    elt.setAttribute('label', newValue);
    newValue = elt;
  }

  cellLabelChanged.apply(this, arguments);
};

Summary

Functions
onInit	Called from within the constructor.
mxCell	Constructs a new cell to be used in a graph model.
Variables
id	Holds the Id.
value	Holds the user object.
geometry	Holds the mxGeometry.
style	Holds the style as a string of the form [(stylename\|key=value);].
vertex	Specifies whether the cell is a vertex.
edge	Specifies whether the cell is an edge.
connectable	Specifies whether the cell is connectable.
visible	Specifies whether the cell is visible.
collapsed	Specifies whether the cell is collapsed.
parent	Reference to the parent cell.
source	Reference to the source terminal.
target	Reference to the target terminal.
children	Holds the child cells.
edges	Holds the edges.
mxTransient	List of members that should not be cloned inside clone.
Functions
getId	Returns the Id of the cell as a string.
setId	Sets the Id of the cell to the given string.
getValue	Returns the user object of the cell.
setValue	Sets the user object of the cell.
valueChanged	Changes the user object after an in-place edit and returns the previous value.
getGeometry	Returns the mxGeometry that describes the geometry.
setGeometry	Sets the mxGeometry to be used as the geometry.
getStyle	Returns a string that describes the style.
setStyle	Sets the string to be used as the style.
isVertex	Returns true if the cell is a vertex.
setVertex	Specifies if the cell is a vertex.
isEdge	Returns true if the cell is an edge.
setEdge	Specifies if the cell is an edge.
isConnectable	Returns true if the cell is connectable.
setConnectable	Sets the connectable state.
isVisible	Returns true if the cell is visibile.
setVisible	Specifies if the cell is visible.
isCollapsed	Returns true if the cell is collapsed.
setCollapsed	Sets the collapsed state.
getParent	Returns the cell’s parent.
setParent	Sets the parent cell.
getTerminal	Returns the source or target terminal.
setTerminal	Sets the source or target terminal and returns the new terminal.
getChildCount	Returns the number of child cells.
getIndex	Returns the index of the specified child in the child array.
getChildAt	Returns the child at the specified index.
insert	Inserts the specified child into the child array at the specified index and updates the parent reference of the child.
remove	Removes the child at the specified index from the child array and returns the child that was removed.
removeFromParent	Removes the cell from its parent.
getEdgeCount	Returns the number of edges in the edge array.
getEdgeIndex	Returns the index of the specified edge in edges.
getEdgeAt	Returns the edge at the specified index in edges.
insertEdge	Inserts the specified edge into the edge array and returns the edge.
removeEdge	Removes the specified edge from the edge array and returns the edge.
removeFromTerminal	Removes the edge from its source or target terminal.
hasAttribute	Returns true if the user object is an XML node that contains the given attribute.
getAttribute	Returns the specified attribute from the user object if it is an XML node.
setAttribute	Sets the specified attribute on the user object if it is an XML node.
clone	Returns a clone of the cell.
cloneValue	Returns a clone of the cell’s user object.

Functions

onInit

Called from within the constructor.

mxCell

function mxCell( value,
geometry,
style )

Constructs a new cell to be used in a graph model. This method invokes onInit upon completion.

Parameters

value	Optional object that represents the cell value.
geometry	Optional mxGeometry that specifies the geometry.
style	Optional formatted string that defines the style.

Variables

id

mxCell.prototype.id

Holds the Id. Default is null.

value

mxCell.prototype.value

Holds the user object. Default is null.

geometry

mxCell.prototype.geometry

Holds the mxGeometry. Default is null.

style

mxCell.prototype.style

Holds the style as a string of the form [(stylename|key=value);]. Default is null.

vertex

mxCell.prototype.vertex

Specifies whether the cell is a vertex. Default is false.

edge

mxCell.prototype.edge

Specifies whether the cell is an edge. Default is false.

connectable

mxCell.prototype.connectable

Specifies whether the cell is connectable. Default is true.

visible

mxCell.prototype.visible

Specifies whether the cell is visible. Default is true.

collapsed

mxCell.prototype.collapsed

Specifies whether the cell is collapsed. Default is false.

parent

mxCell.prototype.parent

Reference to the parent cell.

source

mxCell.prototype.source

Reference to the source terminal.

target

mxCell.prototype.target

Reference to the target terminal.

children

mxCell.prototype.children

Holds the child cells.

edges

mxCell.prototype.edges

Holds the edges.

mxTransient

mxCell.prototype.mxTransient

List of members that should not be cloned inside clone. This field is passed to mxUtils.clone and is not made persistent in mxCellCodec. This is not a convention for all classes, it is only used in this class to mark transient fields since transient modifiers are not supported by the language.

Functions

getId

mxCell.prototype.getId = function()

Returns the Id of the cell as a string.

setId

mxCell.prototype.setId = function( id )

Sets the Id of the cell to the given string.

getValue

mxCell.prototype.getValue = function()

Returns the user object of the cell. The user object is stored in value.

setValue

mxCell.prototype.setValue = function( value )

Sets the user object of the cell. The user object is stored in value.

valueChanged

mxCell.prototype.valueChanged = function( newValue )

Changes the user object after an in-place edit and returns the previous value. This implementation replaces the user object with the given value and returns the old user object.

getGeometry

mxCell.prototype.getGeometry = function()

Returns the mxGeometry that describes the geometry.

setGeometry

mxCell.prototype.setGeometry = function( geometry )

Sets the mxGeometry to be used as the geometry.

getStyle

mxCell.prototype.getStyle = function()

Returns a string that describes the style.

setStyle

mxCell.prototype.setStyle = function( style )

Sets the string to be used as the style.

isVertex

mxCell.prototype.isVertex = function()

Returns true if the cell is a vertex.

setVertex

mxCell.prototype.setVertex = function( vertex )

Specifies if the cell is a vertex. This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

vertex

Boolean that specifies if the cell is a vertex.

isEdge

mxCell.prototype.isEdge = function()

Returns true if the cell is an edge.

setEdge

mxCell.prototype.setEdge = function( edge )

Specifies if the cell is an edge. This should only be assigned at construction of the cell and not be changed during its lifecycle.

Parameters

edge	Boolean that specifies if the cell is an edge.

isConnectable

mxCell.prototype.isConnectable = function()

Returns true if the cell is connectable.

setConnectable

mxCell.prototype.setConnectable = function( connectable )

Sets the connectable state.

Parameters

connectable

Boolean that specifies the new connectable state.

isVisible

mxCell.prototype.isVisible = function()

Returns true if the cell is visibile.

setVisible

mxCell.prototype.setVisible = function( visible )

Specifies if the cell is visible.

Parameters

visible

Boolean that specifies the new visible state.

isCollapsed

mxCell.prototype.isCollapsed = function()

Returns true if the cell is collapsed.

setCollapsed

mxCell.prototype.setCollapsed = function( collapsed )

Sets the collapsed state.

Parameters

collapsed

Boolean that specifies the new collapsed state.

getParent

mxCell.prototype.getParent = function()

Returns the cell’s parent.

setParent

mxCell.prototype.setParent = function( parent )

Sets the parent cell.

Parameters

parent

mxCell that represents the new parent.

getTerminal

mxCell.prototype.getTerminal = function( source )

Returns the source or target terminal.

Parameters

source

Boolean that specifies if the source terminal should be returned.

setTerminal

mxCell.prototype.setTerminal = function( terminal,
isSource )

Sets the source or target terminal and returns the new terminal.

Parameters

terminal	mxCell that represents the new source or target terminal.
isSource	Boolean that specifies if the source or target terminal should be set.

getChildCount

mxCell.prototype.getChildCount = function()

Returns the number of child cells.

getIndex

mxCell.prototype.getIndex = function( child )

Returns the index of the specified child in the child array.

Parameters

child

Child whose index should be returned.

getChildAt

mxCell.prototype.getChildAt = function( index )

Returns the child at the specified index.

Parameters

index

Integer that specifies the child to be returned.

insert

mxCell.prototype.insert = function( child,
index )

Inserts the specified child into the child array at the specified index and updates the parent reference of the child. If not childIndex is specified then the child is appended to the child array. Returns the inserted child.

Parameters

child	mxCell to be inserted or appended to the child array.
index	Optional integer that specifies the index at which the child should be inserted into the child array.

remove

mxCell.prototype.remove = function( index )

Removes the child at the specified index from the child array and returns the child that was removed. Will remove the parent reference of the child.

Parameters

index

Integer that specifies the index of the child to be removed.

removeFromParent

mxCell.prototype.removeFromParent = function()

Removes the cell from its parent.

getEdgeCount

mxCell.prototype.getEdgeCount = function()

Returns the number of edges in the edge array.

getEdgeIndex

mxCell.prototype.getEdgeIndex = function( edge )

Returns the index of the specified edge in edges.

Parameters

edge	mxCell whose index in edges should be returned.

getEdgeAt

mxCell.prototype.getEdgeAt = function( index )

Returns the edge at the specified index in edges.

Parameters

index

Integer that specifies the index of the edge to be returned.

insertEdge

mxCell.prototype.insertEdge = function( edge,
isOutgoing )

Inserts the specified edge into the edge array and returns the edge. Will update the respective terminal reference of the edge.

Parameters

edge	mxCell to be inserted into the edge array.
isOutgoing	Boolean that specifies if the edge is outgoing.

removeEdge

mxCell.prototype.removeEdge = function( edge,
isOutgoing )

Removes the specified edge from the edge array and returns the edge. Will remove the respective terminal reference from the edge.

Parameters

edge	mxCell to be removed from the edge array.
isOutgoing	Boolean that specifies if the edge is outgoing.

removeFromTerminal

mxCell.prototype.removeFromTerminal = function( isSource )

Removes the edge from its source or target terminal.

Parameters

isSource

Boolean that specifies if the edge should be removed from its source or target terminal.

hasAttribute

mxCell.prototype.hasAttribute = function( name )

Returns true if the user object is an XML node that contains the given attribute.

Parameters

name	Name of the attribute.

getAttribute

mxCell.prototype.getAttribute = function( name,
defaultValue )

Returns the specified attribute from the user object if it is an XML node.

Parameters

name	Name of the attribute whose value should be returned.
defaultValue	Optional default value to use if the attribute has no value.

setAttribute

mxCell.prototype.setAttribute = function( name,
value )

Sets the specified attribute on the user object if it is an XML node.

Parameters

name	Name of the attribute whose value should be set.
value	New value of the attribute.

clone

mxCell.prototype.clone = function()

Returns a clone of the cell. Uses cloneValue to clone the user object. All fields in mxTransient are ignored during the cloning.

cloneValue

mxCell.prototype.cloneValue = function()

Returns a clone of the cell’s user object.

mxGeometry

Extends mxRectangle to represent the geometry of a cell.

For vertices, the geometry consists of the x- and y-location, and the width and height. For edges, the geometry consists of the optional terminal- and control points. The terminal points are only required if an edge is unconnected, and are stored in the sourcePoint> and targetPoint variables, respectively.

Example

If an edge is unconnected, that is, it has no source or target terminal, then a geometry with terminal points for a new edge can be defined as follows.

geometry.setTerminalPoint(new mxPoint(x1, y1), true);
geometry.points = [new mxPoint(x2, y2)];
geometry.setTerminalPoint(new mxPoint(x3, y3), false);

Control points are used regardless of the connected state of an edge and may be ignored or interpreted differently depending on the edge’s mxEdgeStyle.

To disable automatic reset of control points after a cell has been moved or resized, the the <mxGraph.resizeEdgesOnMove> and mxGraph.resetEdgesOnResize may be used.

Edge Labels

Using the x- and y-coordinates of a cell’s geometry, it is possible to position the label on edges on a specific location on the actual edge shape as it appears on the screen. The x-coordinate of an edge’s geometry is used to describe the distance from the center of the edge from -1 to 1 with 0 being the center of the edge and the default value. The y-coordinate of an edge’s geometry is used to describe the absolute, orthogonal distance in pixels from that point. In addition, the mxGeometry.offset is used as an absolute offset vector from the resulting point.

This coordinate system is applied if relative is true, otherwise the offset defines the absolute vector from the edge’s center point to the label and the values for <x> and <y> are ignored.

The width and height parameter for edge geometries can be used to set the label width and height (eg. for word wrapping).

Ports

The term “port” refers to a relatively positioned, connectable child cell, which is used to specify the connection between the parent and another cell in the graph. Ports are typically modeled as vertices with relative geometries.

Offsets

The offset field is interpreted in 3 different ways, depending on the cell and the geometry. For edges, the offset defines the absolute offset for the edge label. For relative geometries, the offset defines the absolute offset for the origin (top, left corner) of the vertex, otherwise the offset defines the absolute offset for the label inside the vertex or group.

Summary

Functions
mxGeometry	Constructs a new object to describe the size and location of a vertex or the control points of an edge.
Variables
TRANSLATE_CONTROL_POINTS	Global switch to translate the points in translate.
alternateBounds	Stores alternate values for x, y, width and height in a rectangle.
sourcePoint	Defines the source mxPoint of the edge.
targetPoint	Defines the target mxPoint of the edge.
points	Array of mxPoints which specifies the control points along the edge.
offset	For edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge.
relative	Specifies if the coordinates in the geometry are to be interpreted as relative coordinates.
Functions
swap	Swaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle.
getTerminalPoint	Returns the mxPoint representing the source or target point of this edge.
setTerminalPoint	Sets the sourcePoint or targetPoint to the given mxPoint and returns the new point.
rotate	Rotates the geometry by the given angle around the given center.
translate	Translates the geometry by the specified amount.
scale	Scales the geometry by the given amount.
equals	Returns true if the given object equals this geometry.

Functions

mxGeometry

function mxGeometry( x,
y,
width,
height )

Constructs a new object to describe the size and location of a vertex or the control points of an edge.

Variables

TRANSLATE_CONTROL_POINTS

mxGeometry.prototype.TRANSLATE_CONTROL_POINTS

Global switch to translate the points in translate. Default is true.

alternateBounds

mxGeometry.prototype.alternateBounds

Stores alternate values for x, y, width and height in a rectangle. See swap to exchange the values. Default is null.

sourcePoint

mxGeometry.prototype.sourcePoint

Defines the source mxPoint of the edge. This is used if the corresponding edge does not have a source vertex. Otherwise it is ignored. Default is null.

targetPoint

mxGeometry.prototype.targetPoint

Defines the target mxPoint of the edge. This is used if the corresponding edge does not have a target vertex. Otherwise it is ignored. Default is null.

points

mxGeometry.prototype.points

Array of mxPoints which specifies the control points along the edge. These points are the intermediate points on the edge, for the endpoints use targetPoint and sourcePoint or set the terminals of the edge to a non-null value. Default is null.

offset

mxGeometry.prototype.offset

For edges, this holds the offset (in pixels) from the position defined by <x> and <y> on the edge. For relative geometries (for vertices), this defines the absolute offset from the point defined by the relative coordinates. For absolute geometries (for vertices), this defines the offset for the label. Default is null.

relative

mxGeometry.prototype.relative

Specifies if the coordinates in the geometry are to be interpreted as relative coordinates. For edges, this is used to define the location of the edge label relative to the edge as rendered on the display. For vertices, this specifies the relative location inside the bounds of the parent cell.

If this is false, then the coordinates are relative to the origin of the parent cell or, for edges, the edge label position is relative to the center of the edge as rendered on screen.

Default is false.

Functions

swap

mxGeometry.prototype.swap = function()

Swaps the x, y, width and height with the values stored in alternateBounds and puts the previous values into alternateBounds as a rectangle. This operation is carried-out in-place, that is, using the existing geometry instance. If this operation is called during a graph model transactional change, then the geometry should be cloned before calling this method and setting the geometry of the cell using mxGraphModel.setGeometry.

getTerminalPoint

mxGeometry.prototype.getTerminalPoint = function( isSource )

Returns the mxPoint representing the source or target point of this edge. This is only used if the edge has no source or target vertex.

Parameters

isSource

Boolean that specifies if the source or target point should be returned.

setTerminalPoint

mxGeometry.prototype.setTerminalPoint = function( point,
isSource )

Sets the sourcePoint or targetPoint to the given mxPoint and returns the new point.

Parameters

point	Point to be used as the new source or target point.
isSource	Boolean that specifies if the source or target point should be set.

rotate

mxGeometry.prototype.rotate = function( angle,
cx )

Rotates the geometry by the given angle around the given center. That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are translated by the given amount. <x> and <y> are only translated if relative is false.

Parameters

angle	Number that specifies the rotation angle in degrees.
cx	mxPoint that specifies the center of the rotation.

translate

mxGeometry.prototype.translate = function( dx,
dy )

Translates the geometry by the specified amount. That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are translated by the given amount. <x> and <y> are only translated if relative is false. If TRANSLATE_CONTROL_POINTS is false, then points are not modified by this function.

Parameters

dx	Number that specifies the x-coordinate of the translation.
dy	Number that specifies the y-coordinate of the translation.

scale

mxGeometry.prototype.scale = function( sx,
sy,
fixedAspect )

Scales the geometry by the given amount. That is, <x> and <y> of the geometry, the sourcePoint, targetPoint and all points are scaled by the given amount. <x>, <y>, <width> and <height> are only scaled if relative is false. If <fixedAspect> is true, then the smaller value is used to scale the width and the height.

Parameters

sx	Number that specifies the horizontal scale factor.
sy	Number that specifies the vertical scale factor.
fixedAspect	Optional boolean to keep the aspect ratio fixed.

equals

mxGeometry.prototype.equals = function( obj )

Returns true if the given object equals this geometry.

mxCellPath

Implements a mechanism for temporary cell Ids.

Summary

Variables
PATH_SEPARATOR	Defines the separator between the path components.
Functions
create	Creates the cell path for the given cell.
getParentPath	Returns the path for the parent of the cell represented by the given path.
resolve	Returns the cell for the specified cell path using the given root as the root of the path.
compare	Compares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.

Variables

PATH_SEPARATOR

Defines the separator between the path components. Default is “.”.

Functions

create

create: function( cell )

Creates the cell path for the given cell. The cell path is a concatenation of the indices of all ancestors on the (finite) path to the root, eg. “0.0.0.1”.

Parameters

cell	Cell whose path should be returned.

getParentPath

getParentPath: function( path )

Returns the path for the parent of the cell represented by the given path. Returns null if the given path has no parent.

Parameters

path	Path whose parent path should be returned.

resolve

resolve: function( root,
path )

Returns the cell for the specified cell path using the given root as the root of the path.

Parameters

root	Root cell of the path to be resolved.
path	String that defines the path.

compare

compare: function( p1,
p2 )

Compares the given cell paths and returns -1 if p1 is smaller, 0 if p1 is equal and 1 if p1 is greater than p2.

mxPerimeter

Provides various perimeter functions to be used in a style as the value of mxConstants.STYLE_PERIMETER. Perimeters for rectangle, circle, rhombus and triangle are available.

Example

<add as="perimeter">mxPerimeter.RectanglePerimeter</add>

Or programmatically

style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;

When adding new perimeter functions, it is recommended to use the mxPerimeter-namespace as follows:

mxPerimeter.CustomPerimeter = function (bounds, vertex, next, orthogonal)
{
  var x = 0; // Calculate x-coordinate
  var y = 0; // Calculate y-coordainte

  return new mxPoint(x, y);
}

The new perimeter should then be registered in the mxStyleRegistry as follows

mxStyleRegistry.putValue('customPerimeter', mxPerimeter.CustomPerimeter);

The custom perimeter above can now be used in a specific vertex as follows

model.setStyle(vertex, 'perimeter=customPerimeter');

Note that the key of the mxStyleRegistry entry for the function should be used in string values, unless mxGraphView.allowEval is true, in which case you can also use mxPerimeter.CustomPerimeter for the value in the cell style above.

Or it can be used for all vertices in the graph as follows

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter;

Note that the object can be used directly when programmatically setting the value, but the key in the mxStyleRegistry should be used when setting the value via a key, value pair in a cell style.

The parameters are explained in RectanglePerimeter.

Summary

Functions
RectanglePerimeter	Describes a rectangular perimeter for the given bounds.
EllipsePerimeter	Describes an elliptic perimeter.
RhombusPerimeter	Describes a rhombus (aka diamond) perimeter.
TrianglePerimeter	Describes a triangle perimeter.
HexagonPerimeter	Describes a hexagon perimeter.

Functions

RectanglePerimeter

RectanglePerimeter: function ( bounds,
vertex,
next,
orthogonal )

Describes a rectangular perimeter for the given bounds.

Parameters

bounds	mxRectangle that represents the absolute bounds of the vertex.
vertex	mxCellState that represents the vertex.
next	mxPoint that represents the nearest neighbour point on the given edge.
orthogonal	Boolean that specifies if the orthogonal projection onto the perimeter should be returned. If this is false then the intersection of the perimeter and the line between the next and the center point is returned.

EllipsePerimeter

EllipsePerimeter: function ( bounds,
vertex,
next,
orthogonal )

Describes an elliptic perimeter. See RectanglePerimeter for a description of the parameters.

RhombusPerimeter

RhombusPerimeter: function ( bounds,
vertex,
next,
orthogonal )

Describes a rhombus (aka diamond) perimeter. See RectanglePerimeter for a description of the parameters.

TrianglePerimeter

TrianglePerimeter: function ( bounds,
vertex,
next,
orthogonal )

Describes a triangle perimeter. See RectanglePerimeter for a description of the parameters.

HexagonPerimeter

HexagonPerimeter: function ( bounds,
vertex,
next,
orthogonal )

Describes a hexagon perimeter. See RectanglePerimeter for a description of the parameters.

mxPrintPreview

Implements printing of a diagram across multiple pages. The following opens a print preview for an existing graph:

var preview = new mxPrintPreview(graph);
preview.open();

Use mxUtils.getScaleForPageCount as follows in order to print the graph across a given number of pages:

var pageCount = mxUtils.prompt('Enter page count', '1');

if (pageCount != null)
{
  var scale = mxUtils.getScaleForPageCount(pageCount, graph);
  var preview = new mxPrintPreview(graph, scale);
  preview.open();
}

Additional pages

To add additional pages before and after the output, getCoverPages and getAppendices can be used, respectively.

var preview = new mxPrintPreview(graph, 1);

preview.getCoverPages = function(w, h)
{
  return [this.renderPage(w, h, 0, 0, mxUtils.bind(this, function(div)
  {
    div.innerHTML = '<div style="position:relative;margin:4px;">Cover Page</p>'
  }))];
};

preview.getAppendices = function(w, h)
{
  return [this.renderPage(w, h, 0, 0, mxUtils.bind(this, function(div)
  {
    div.innerHTML = '<div style="position:relative;margin:4px;">Appendix</p>'
  }))];
};

preview.open();

CSS

The CSS from the original page is not carried over to the print preview. To add CSS to the page, use the css argument in the open function or override writeHead to add the respective link tags as follows:

var writeHead = preview.writeHead;
preview.writeHead = function(doc, css)
{
  writeHead.apply(this, arguments);
  doc.writeln('<link rel="stylesheet" type="text/css" href="style.css">');
};

Padding

To add a padding to the page in the preview (but not the print output), use the following code:

preview.writeHead = function(doc)
{
  writeHead.apply(this, arguments);

  doc.writeln('<style type="text/css">');
  doc.writeln('@media screen {');
  doc.writeln('  body > div { padding-top:30px;padding-left:40px;box-sizing:content-box; }');
  doc.writeln('}');
  doc.writeln('</style>');
};

Headers

Apart from setting the title argument in the mxPrintPreview constructor you can override renderPage as follows to add a header to any page:

var oldRenderPage = mxPrintPreview.prototype.renderPage;
mxPrintPreview.prototype.renderPage = function(w, h, x, y, content, pageNumber)
{
  var div = oldRenderPage.apply(this, arguments);

  var header = document.createElement('div');
  header.style.position = 'absolute';
  header.style.top = '0px';
  header.style.width = '100%';
  header.style.textAlign = 'right';
  mxUtils.write(header, 'Your header here');
  div.firstChild.appendChild(header);

  return div;
};

The pageNumber argument contains the number of the current page, starting at 1. To display a header on the first page only, check pageNumber and add a vertical offset in the constructor call for the height of the header.

Page Format

For landscape printing, use <mxConstants.PAGE_FORMAT_A4_LANDSCAPE> as the pageFormat in mxUtils.getScaleForPageCount and mxPrintPreview. Keep in mind that one can not set the defaults for the print dialog of the operating system from JavaScript so the user must manually choose a page format that matches this setting.

You can try passing the following CSS directive to open to set the page format in the print dialog to landscape. However, this CSS directive seems to be ignored in most major browsers, including IE.

@page {
  size: landscape;
}

Note that the print preview behaves differently in IE when used from the filesystem or via HTTP so printing should always be tested via HTTP.

If you are using a DOCTYPE in the source page you can override <getDoctype> and provide the same DOCTYPE for the print preview if required. Here is an example for IE8 standards mode.

var preview = new mxPrintPreview(graph);
preview.getDoctype = function()
{
  return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=8" ><![endif]-->';
};
preview.open();

Summary

Functions
mxPrintPreview	Constructs a new print preview for the given parameters.
Variables
graph	Reference to the mxGraph that should be previewed.
pageFormat	Holds the mxRectangle that defines the page format.
scale	Holds the scale of the print preview.
border	The border inset around each side of every page in the preview.
marginTop	The margin at the top of the page (number).
marginBottom	The margin at the bottom of the page (number).
x0	Holds the horizontal offset of the output.
y0	Holds the vertical offset of the output.
autoOrigin	Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents.
printOverlays	Specifies if overlays should be printed.
printControls	Specifies if controls (such as folding icons) should be printed.
printBackgroundImage	Specifies if the background image should be printed.
backgroundColor	Holds the color value for the page background color.
borderColor	Holds the color value for the page border.
title	Holds the title of the preview window.
pageSelector	Boolean that specifies if the page selector should be displayed.
wnd	Reference to the preview window.
targetWindow	Assign any window here to redirect the rendering in open.
pageCount	Holds the actual number of pages in the preview.
clipping	Specifies is clipping should be used to avoid creating too many cell states in large diagrams.
Functions
getWindow	Returns wnd.
getDocType	Returns the string that should go before the HTML tag in the print preview page.
appendGraph	Adds the given graph to the existing print preview.
open	Shows the print preview window.
addPageBreak	Adds a page break to the given document.
closeDocument	Writes the closing tags for body and page after calling writePostfix.
writeHead	Writes the HEAD section into the given document, without the opening and closing HEAD tags.
writePostfix	Called before closing the body of the page.
createPageSelector	Creates the page selector table.
renderPage	Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.
getRoot	Returns the root cell for painting the graph.
addGraphFragment	Adds a graph fragment to the given div.
getLinkForCellState	Returns the link for the given cell state.
insertBackgroundImage	Inserts the background image into the given div.
getCoverPages	Returns the pages to be added before the print output.
getAppendices	Returns the pages to be added after the print output.
print	Opens the print preview and shows the print dialog.
close	Closes the print preview window.

Functions

mxPrintPreview

function mxPrintPreview( graph,
scale,
pageFormat,
border,
x0,
y0,
borderColor,
title,
pageSelector )

Constructs a new print preview for the given parameters.

Parameters

graph	mxGraph to be previewed.
scale	Optional scale of the output. Default is 1 / mxGraph.pageScale.
border	Border in pixels along each side of every page. Note that the actual print function in the browser will add another border for printing.
pageFormat	mxRectangle that specifies the page format (in pixels). This should match the page format of the printer. Default uses the mxGraph.pageFormat of the given graph.
x0	Optional left offset of the output. Default is 0.
y0	Optional top offset of the output. Default is 0.
borderColor	Optional color of the page border. Default is no border. Note that a border is sometimes useful to highlight the printed page border in the print preview of the browser.
title	Optional string that is used for the window title. Default is ‘Printer-friendly version’.
pageSelector	Optional boolean that specifies if the page selector should appear in the window with the print preview. Default is true.

Variables

graph

mxPrintPreview.prototype.graph

Reference to the mxGraph that should be previewed.

pageFormat

mxPrintPreview.prototype.pageFormat

Holds the mxRectangle that defines the page format.

scale

mxPrintPreview.prototype.scale

Holds the scale of the print preview.

border

mxPrintPreview.prototype.border

The border inset around each side of every page in the preview. This is set to 0 if autoOrigin is false.

marginTop

mxPrintPreview.prototype.marginTop

The margin at the top of the page (number). Default is 0.

marginBottom

mxPrintPreview.prototype.marginBottom

The margin at the bottom of the page (number). Default is 0.

x0

mxPrintPreview.prototype.x0

Holds the horizontal offset of the output.

y0

mxPrintPreview.prototype.y0

Holds the vertical offset of the output.

autoOrigin

mxPrintPreview.prototype.autoOrigin

Specifies if the origin should be automatically computed based on the top, left corner of the actual diagram contents. The required offset will be added to x0 and y0 in open. Default is true.

printOverlays

mxPrintPreview.prototype.printOverlays

Specifies if overlays should be printed. Default is false.

printControls

mxPrintPreview.prototype.printControls

Specifies if controls (such as folding icons) should be printed. Default is false.

printBackgroundImage

mxPrintPreview.prototype.printBackgroundImage

Specifies if the background image should be printed. Default is false.

backgroundColor

mxPrintPreview.prototype.backgroundColor

Holds the color value for the page background color. Default is #ffffff.

borderColor

mxPrintPreview.prototype.borderColor

Holds the color value for the page border.

title

mxPrintPreview.prototype.title

Holds the title of the preview window.

pageSelector

mxPrintPreview.prototype.pageSelector

Boolean that specifies if the page selector should be displayed. Default is true.

wnd

mxPrintPreview.prototype.wnd

Reference to the preview window.

targetWindow

mxPrintPreview.prototype.targetWindow

Assign any window here to redirect the rendering in open.

pageCount

mxPrintPreview.prototype.pageCount

Holds the actual number of pages in the preview.

clipping

mxPrintPreview.prototype.clipping

Specifies is clipping should be used to avoid creating too many cell states in large diagrams. The bounding box of the cells in the original diagram is used if this is enabled. Default is true.

Functions

getWindow

mxPrintPreview.prototype.getWindow = function()

Returns wnd.

getDocType

Returns the string that should go before the HTML tag in the print preview page. This implementation returns an X-UA meta tag for IE5 in quirks mode, IE8 in IE8 standards mode and edge in IE9 standards mode.

appendGraph

mxPrintPreview.prototype.appendGraph = function( graph,
scale,
x0,
y0,
forcePageBreaks,
keepOpen )

Adds the given graph to the existing print preview.

Parameters

css	Optional CSS string to be used in the head section.
targetWindow	Optional window that should be used for rendering. If this is specified then no HEAD tag, CSS and BODY tag will be written.

open

mxPrintPreview.prototype.open = function( css,
targetWindow,
forcePageBreaks,
keepOpen )

Shows the print preview window. The window is created here if it does not exist.

Parameters

css	Optional CSS string to be used in the head section.
targetWindow	Optional window that should be used for rendering. If this is specified then no HEAD tag, CSS and BODY tag will be written.

addPageBreak

mxPrintPreview.prototype.addPageBreak = function( doc )

Adds a page break to the given document.

closeDocument

mxPrintPreview.prototype.closeDocument = function()

Writes the closing tags for body and page after calling writePostfix.

writeHead

mxPrintPreview.prototype.writeHead = function( doc,
css )

Writes the HEAD section into the given document, without the opening and closing HEAD tags.

writePostfix

mxPrintPreview.prototype.writePostfix = function( doc )

Called before closing the body of the page. This implementation is empty.

createPageSelector

mxPrintPreview.prototype.createPageSelector = function( vpages,
hpages )

Creates the page selector table.

renderPage

mxPrintPreview.prototype.renderPage = function( w,
h,
dx,
dy,
content,
pageNumber )

Creates a DIV that prints a single page of the given graph using the given scale and returns the DIV that represents the page.

Parameters

w	Width of the page in pixels.
h	Height of the page in pixels.
dx	Optional horizontal page offset in pixels (used internally).
dy	Optional vertical page offset in pixels (used internally).
content	Callback that adds the HTML content to the inner div of a page. Takes the inner div as the argument.
pageNumber	Integer representing the page number.

getRoot

mxPrintPreview.prototype.getRoot = function()

Returns the root cell for painting the graph.

addGraphFragment

mxPrintPreview.prototype.addGraphFragment = function( dx,
dy,
scale,
pageNumber,
div,
clip )

Adds a graph fragment to the given div.

Parameters

dx	Horizontal translation for the diagram.
dy	Vertical translation for the diagram.
scale	Scale for the diagram.
pageNumber	Number of the page to be rendered.
div	Div that contains the output.
clip	Contains the clipping rectangle as an mxRectangle.

getLinkForCellState

mxPrintPreview.prototype.getLinkForCellState = function( state )

Returns the link for the given cell state. This returns null.

insertBackgroundImage

mxPrintPreview.prototype.insertBackgroundImage = function( div,
dx,
dy )

Inserts the background image into the given div.

getCoverPages

mxPrintPreview.prototype.getCoverPages = function()

Returns the pages to be added before the print output. This returns null.

getAppendices

mxPrintPreview.prototype.getAppendices = function()

Returns the pages to be added after the print output. This returns null.

print

mxPrintPreview.prototype.print = function( css )

Opens the print preview and shows the print dialog.

Parameters

css	Optional CSS string to be used in the head section.

close

mxPrintPreview.prototype.close = function()

Closes the print preview window.

mxStylesheet

Defines the appearance of the cells in a graph. See putCellStyle for an example of creating a new cell style. It is recommended to use objects, not arrays for holding cell styles. Existing styles can be cloned using mxUtils.clone and turned into a string for debugging using mxUtils.toString.

Default Styles

The stylesheet contains two built-in styles, which are used if no style is defined for a cell:

defaultVertex	Default style for vertices
defaultEdge	Default style for edges

Example

var vertexStyle = stylesheet.getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = stylesheet.getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;

Modifies the built-in default styles.

To avoid the default style for a cell, add a leading semicolon to the style definition, eg.

;shadow=1

Removing keys

For removing a key in a cell style of the form [stylename;|key=value;] the special value none can be used, eg. highlight;fillColor=none

See also the helper methods in mxUtils to modify strings of this format, namely mxUtils.setStyle, mxUtils.indexOfStylename, mxUtils.addStylename, mxUtils.removeStylename, mxUtils.removeAllStylenames and mxUtils.setStyleFlag.

Summary

Functions
mxStylesheet	Constructs a new stylesheet and assigns default styles.
styles	Maps from names to cell styles.
createDefaultVertexStyle	Creates and returns the default vertex style.
createDefaultEdgeStyle	Creates and returns the default edge style.
putDefaultVertexStyle	Sets the default style for vertices using defaultVertex as the stylename.
putDefaultEdgeStyle	Sets the default style for edges using defaultEdge as the stylename.
getDefaultVertexStyle	Returns the default style for vertices.
getDefaultEdgeStyle	Sets the default style for edges.
putCellStyle	Stores the given map of key, value pairs under the given name in styles.
getCellStyle	Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Functions

mxStylesheet

function mxStylesheet()

Constructs a new stylesheet and assigns default styles.

styles

Maps from names to cell styles. Each cell style is a map of key, value pairs.

createDefaultVertexStyle

mxStylesheet.prototype.createDefaultVertexStyle = function()

Creates and returns the default vertex style.

createDefaultEdgeStyle

mxStylesheet.prototype.createDefaultEdgeStyle = function()

Creates and returns the default edge style.

putDefaultVertexStyle

mxStylesheet.prototype.putDefaultVertexStyle = function( style )

Sets the default style for vertices using defaultVertex as the stylename.

Parameters

style

Key, value pairs that define the style.

putDefaultEdgeStyle

mxStylesheet.prototype.putDefaultEdgeStyle = function( style )

Sets the default style for edges using defaultEdge as the stylename.

getDefaultVertexStyle

mxStylesheet.prototype.getDefaultVertexStyle = function()

Returns the default style for vertices.

getDefaultEdgeStyle

mxStylesheet.prototype.getDefaultEdgeStyle = function()

Sets the default style for edges.

putCellStyle

mxStylesheet.prototype.putCellStyle = function( name,
style )

Stores the given map of key, value pairs under the given name in styles.

Example

The following example adds a new style called ‘rounded’ into an existing stylesheet:

var style = new Object();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ROUNDED] = true;
graph.getStylesheet().putCellStyle('rounded', style);

In the above example, the new style is an object. The possible keys of the object are all the constants in mxConstants that start with STYLE and the values are either JavaScript objects, such as <mxPerimeter.RightAngleRectanglePerimeter> (which is in fact a function) or expressions, such as true. Note that not all keys will be interpreted by all shapes (eg. the line shape ignores the fill color). The final call to this method associates the style with a name in the stylesheet. The style is used in a cell with the following code:

model.setStyle(cell, 'rounded');

Parameters

name	Name for the style to be stored.
style	Key, value pairs that define the style.

getCellStyle

mxStylesheet.prototype.getCellStyle = function( name,
defaultStyle )

Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Parameters

name	String of the form [(stylename\|key=value);] that represents the style.
defaultStyle	Default style to be returned if no style can be found.

mxCellState

Represents the current state of a cell in a given mxGraphView.

For edges, the edge label position is stored in absoluteOffset.

The size for oversize labels can be retrieved using the boundingBox property of the text field as shown below.

var bbox = (state.text != null) ? state.text.boundingBox : null;

Summary

Functions
mxCellState	Constructs a new object that represents the current state of the given cell in the specified view.
Variables
view	Reference to the enclosing mxGraphView.
cell	Reference to the mxCell that is represented by this state.
style	Contains an array of key, value pairs that represent the style of the cell.
invalidStyle	Specifies if the style is invalid.
invalid	Specifies if the state is invalid.
origin	mxPoint that holds the origin for all child cells.
absolutePoints	Holds an array of mxPoints that represent the absolute points of an edge.
absoluteOffset	mxPoint that holds the absolute offset.
visibleSourceState	Caches the visible source terminal state.
visibleTargetState	Caches the visible target terminal state.
terminalDistance	Caches the distance between the end points for an edge.
length	Caches the length of an edge.
segments	Array of numbers that represent the cached length of each segment of the edge.
shape	Holds the mxShape that represents the cell graphically.
text	Holds the mxText that represents the label of the cell.
unscaledWidth	Holds the unscaled width of the state.
Functions
getPerimeterBounds	Returns the mxRectangle that should be used as the perimeter of the cell.
setAbsoluteTerminalPoint	Sets the first or last point in absolutePoints depending on isSource.
setCursor	Sets the given cursor on the shape and text shape.
getVisibleTerminal	Returns the visible source or target terminal cell.
getVisibleTerminalState	Returns the visible source or target terminal state.
setVisibleTerminalState	Sets the visible source or target terminal state.
getCellBounds	Returns the unscaled, untranslated bounds.
getPaintBounds	Returns the unscaled, untranslated paint bounds.
updateCachedBounds	Updates the cellBounds and paintBounds.
setState	Copies all fields from the given state to this state.
clone	Returns a clone of this mxPoint.
destroy	Destroys the state and all associated resources.

Functions

mxCellState

function mxCellState( view,
cell,
style )

Constructs a new object that represents the current state of the given cell in the specified view.

Parameters

view	mxGraphView that contains the state.
cell	mxCell that this state represents.
style	Array of key, value pairs that constitute the style.

Variables

view

mxCellState.prototype.view

Reference to the enclosing mxGraphView.

cell

mxCellState.prototype.cell

Reference to the mxCell that is represented by this state.

style

mxCellState.prototype.style

Contains an array of key, value pairs that represent the style of the cell.

invalidStyle

mxCellState.prototype.invalidStyle

Specifies if the style is invalid. Default is false.

invalid

mxCellState.prototype.invalid

Specifies if the state is invalid. Default is true.

origin

mxCellState.prototype.origin

mxPoint that holds the origin for all child cells. Default is a new empty mxPoint.

absolutePoints

mxCellState.prototype.absolutePoints

Holds an array of mxPoints that represent the absolute points of an edge.

absoluteOffset

mxCellState.prototype.absoluteOffset

mxPoint that holds the absolute offset. For edges, this is the absolute coordinates of the label position. For vertices, this is the offset of the label relative to the top, left corner of the vertex.

visibleSourceState

mxCellState.prototype.visibleSourceState

Caches the visible source terminal state.

visibleTargetState

mxCellState.prototype.visibleTargetState

Caches the visible target terminal state.

terminalDistance

mxCellState.prototype.terminalDistance

Caches the distance between the end points for an edge.

length

mxCellState.prototype.length

Caches the length of an edge.

segments

mxCellState.prototype.segments

Array of numbers that represent the cached length of each segment of the edge.

shape

mxCellState.prototype.shape

Holds the mxShape that represents the cell graphically.

text

mxCellState.prototype.text

Holds the mxText that represents the label of the cell. Thi smay be null if the cell has no label.

unscaledWidth

mxCellState.prototype.unscaledWidth

Holds the unscaled width of the state.

Functions

getPerimeterBounds

mxCellState.prototype.getPerimeterBounds = function( border,
bounds )

Returns the mxRectangle that should be used as the perimeter of the cell.

Parameters

border	Optional border to be added around the perimeter bounds.
bounds	Optional mxRectangle to be used as the initial bounds.

setAbsoluteTerminalPoint

mxCellState.prototype.setAbsoluteTerminalPoint = function( point,
isSource )

Sets the first or last point in absolutePoints depending on isSource.

Parameters

point	mxPoint that represents the terminal point.
isSource	Boolean that specifies if the first or last point should be assigned.

setCursor

mxCellState.prototype.setCursor = function( cursor )

Sets the given cursor on the shape and text shape.

getVisibleTerminal

mxCellState.prototype.getVisibleTerminal = function( source )

Returns the visible source or target terminal cell.

Parameters

source

Boolean that specifies if the source or target cell should be returned.

getVisibleTerminalState

mxCellState.prototype.getVisibleTerminalState = function( source )

Returns the visible source or target terminal state.

Parameters

source

Boolean that specifies if the source or target state should be returned.

setVisibleTerminalState

mxCellState.prototype.setVisibleTerminalState = function( terminalState,
source )

Sets the visible source or target terminal state.

Parameters

terminalState	mxCellState that represents the terminal.
source	Boolean that specifies if the source or target state should be set.

getCellBounds

mxCellState.prototype.getCellBounds = function()

Returns the unscaled, untranslated bounds.

getPaintBounds

mxCellState.prototype.getPaintBounds = function()

Returns the unscaled, untranslated paint bounds. This is the same as getCellBounds but with a 90 degree rotation if the shape’s isPaintBoundsInverted returns true.

updateCachedBounds

mxCellState.prototype.updateCachedBounds = function()

Updates the cellBounds and paintBounds.

setState

mxCellState.prototype.setState = function( state )

Copies all fields from the given state to this state.

clone

mxCellState.prototype.clone = function()

Returns a clone of this mxPoint.

destroy

mxCellState.prototype.destroy = function()

Destroys the state and all associated resources.

mxGraphSelectionModel

Implements the selection model for a graph. Here is a listener that handles all removed selection cells.

graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
  var cells = evt.getProperty('added');

  for (var i = 0; i < cells.length; i++)
  {
    // Handle cells[i]...
  }
});

Summary

Events
mxEvent.UNDO	Fires after the selection was changed in changeSelection.
mxEvent.CHANGE	Fires after the selection changes by executing an mxSelectionChange.
Functions
mxGraphSelectionModel	Constructs a new graph selection model for the given mxGraph.
Variables
doneResource	Specifies the resource key for the status message after a long operation.
updatingSelectionResource	Specifies the resource key for the status message while the selection is being updated.
graph	Reference to the enclosing mxGraph.
singleSelection	Specifies if only one selected item at a time is allowed.
Functions
isSingleSelection	Returns singleSelection as a boolean.
setSingleSelection	Sets the singleSelection flag.
isSelected	Returns true if the given mxCell is selected.
isEmpty	Returns true if no cells are currently selected.
clear	Clears the selection and fires a <change> event if the selection was not empty.
setCell	Selects the specified mxCell using setCells.
setCells	Selects the given array of mxCells and fires a <change> event.
getFirstSelectableCell	Returns the first selectable cell in the given array of cells.
addCell	Adds the given mxCell to the selection and fires a <select> event.
addCells	Adds the given array of mxCells to the selection and fires a <select> event.
removeCell	Removes the specified mxCell from the selection and fires a <select> event for the remaining cells.
removeCells
changeSelection	Inner callback to add the specified mxCell to the selection.
cellAdded	Inner callback to add the specified mxCell to the selection.
cellRemoved	Inner callback to remove the specified mxCell from the selection.

Events

mxEvent.UNDO

Fires after the selection was changed in changeSelection. The <code>edit</code> property contains the mxUndoableEdit which contains the mxSelectionChange.

mxEvent.CHANGE

Fires after the selection changes by executing an mxSelectionChange. The <code>added</code> and <code>removed</code> properties contain arrays of cells that have been added to or removed from the selection, respectively. The names are inverted due to historic reasons. This cannot be changed.

Functions

mxGraphSelectionModel

function mxGraphSelectionModel( graph )

Constructs a new graph selection model for the given mxGraph.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

doneResource

mxGraphSelectionModel.prototype.doneResource

Specifies the resource key for the status message after a long operation. If the resource for this key does not exist then the value is used as the status message. Default is ‘done’.

updatingSelectionResource

mxGraphSelectionModel.prototype.updatingSelectionResource

Specifies the resource key for the status message while the selection is being updated. If the resource for this key does not exist then the value is used as the status message. Default is ‘updatingSelection’.

graph

mxGraphSelectionModel.prototype.graph

Reference to the enclosing mxGraph.

singleSelection

mxGraphSelectionModel.prototype.singleSelection

Specifies if only one selected item at a time is allowed. Default is false.

Functions

isSingleSelection

mxGraphSelectionModel.prototype.isSingleSelection = function()

Returns singleSelection as a boolean.

setSingleSelection

mxGraphSelectionModel.prototype.setSingleSelection = function( singleSelection )

Sets the singleSelection flag.

Parameters

singleSelection

Boolean that specifies the new value for singleSelection.

isSelected

mxGraphSelectionModel.prototype.isSelected = function( cell )

Returns true if the given mxCell is selected.

isEmpty

mxGraphSelectionModel.prototype.isEmpty = function()

Returns true if no cells are currently selected.

clear

mxGraphSelectionModel.prototype.clear = function()

Clears the selection and fires a <change> event if the selection was not empty.

setCell

mxGraphSelectionModel.prototype.setCell = function( cell )

Selects the specified mxCell using setCells.

Parameters

cell	mxCell to be selected.

setCells

mxGraphSelectionModel.prototype.setCells = function( cells )

Selects the given array of mxCells and fires a <change> event.

Parameters

cells

Array of mxCells to be selected.

getFirstSelectableCell

mxGraphSelectionModel.prototype.getFirstSelectableCell = function( cells )

Returns the first selectable cell in the given array of cells.

addCell

mxGraphSelectionModel.prototype.addCell = function( cell )

Adds the given mxCell to the selection and fires a <select> event.

Parameters

cell	mxCell to add to the selection.

addCells

mxGraphSelectionModel.prototype.addCells = function( cells )

Adds the given array of mxCells to the selection and fires a <select> event.

Parameters

cells

Array of mxCells to add to the selection.

removeCell

mxGraphSelectionModel.prototype.removeCell = function( cell )

Removes the specified mxCell from the selection and fires a <select> event for the remaining cells.

Parameters

cell	mxCell to remove from the selection.

removeCells

mxGraphSelectionModel.prototype.removeCells = function( cells )

changeSelection

mxGraphSelectionModel.prototype.changeSelection = function( added,
removed )

Inner callback to add the specified mxCell to the selection. No event is fired in this implementation.

Paramters

cell	mxCell to add to the selection.

cellAdded

mxGraphSelectionModel.prototype.cellAdded = function( cell )

Inner callback to add the specified mxCell to the selection. No event is fired in this implementation.

Paramters

cell	mxCell to add to the selection.

cellRemoved

mxGraphSelectionModel.prototype.cellRemoved = function( cell )

Inner callback to remove the specified mxCell from the selection. No event is fired in this implementation.

Parameters

cell	mxCell to remove from the selection.

mxSelectionChange

Action to change the current root in a view.

Summary

Functions
mxCurrentRootChange	Constructs a change of the current root in the given view.
execute	Changes the current root of the view.

Functions

mxCurrentRootChange

Constructs a change of the current root in the given view.

execute

mxSelectionChange.prototype.execute = function()

Changes the current root of the view.

mxCellEditor

In-place editor for the graph. To control this editor, use mxGraph.invokesStopCellEditing, mxGraph.enterStopsCellEditing and mxGraph.escapeEnabled. If mxGraph.enterStopsCellEditing is true then ctrl-enter or shift-enter can be used to create a linefeed. The F2 and escape keys can always be used to stop editing.

To customize the location of the textbox in the graph, override getEditorBounds as follows:

graph.cellEditor.getEditorBounds = function(state)
{
  var result = mxCellEditor.prototype.getEditorBounds.apply(this, arguments);

  if (this.graph.getModel().isEdge(state.cell))
  {
    result.x = state.getCenterX() - result.width / 2;
    result.y = state.getCenterY() - result.height / 2;
  }

  return result;
};

Note that this hook is only called if autoSize is false. If autoSize is true, then mxShape.getLabelBounds is used to compute the current bounds of the textbox.

The textarea uses the mxCellEditor CSS class. You can modify this class in your custom CSS. Note: You should modify the CSS after loading the client in the page.

Example

To only allow numeric input in the in-place editor, use the following code.

var text = graph.cellEditor.textarea;

mxEvent.addListener(text, 'keydown', function (evt)
{
  if (!(evt.keyCode >= 48 && evt.keyCode <= 57) &&
      !(evt.keyCode >= 96 && evt.keyCode <= 105))
  {
    mxEvent.consume(evt);
  }
});

Placeholder

To implement a placeholder for cells without a label, use the emptyLabelText variable.

Resize in Chrome

Resize of the textarea is disabled by default. If you want to enable this feature extend init and set this.textarea.style.resize = ‘’.

To start editing on a key press event, the container of the graph should have focus or a focusable parent should be used to add the key press handler as follows.

mxEvent.addListener(graph.container, 'keypress', mxUtils.bind(this, function(evt)
{
  if (!graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0 &&
      !mxEvent.isAltDown(evt) && !mxEvent.isControlDown(evt) && !mxEvent.isMetaDown(evt))
  {
    graph.startEditing();

    if (mxClient.IS_FF)
    {
      graph.cellEditor.textarea.value = String.fromCharCode(evt.which);
    }
  }
}));

To allow focus for a DIV, and hence to receive key press events, some browsers require it to have a valid tabindex attribute. In this case the following code may be used to keep the container focused.

var graphFireMouseEvent = graph.fireMouseEvent;
graph.fireMouseEvent = function(evtName, me, sender)
{
  if (evtName == mxEvent.MOUSE_DOWN)
  {
    this.container.focus();
  }

  graphFireMouseEvent.apply(this, arguments);
};

Summary

Functions
mxCellEditor	Constructs a new in-place editor for the specified graph.
Variables
graph	Reference to the enclosing mxGraph.
textarea	Holds the DIV that is used for text editing.
editingCell	Reference to the mxCell that is currently being edited.
trigger	Reference to the event that was used to start editing.
modified	Specifies if the label has been modified.
autoSize	Specifies if the textarea should be resized while the text is being edited.
selectText	Specifies if the text should be selected when editing starts.
emptyLabelText	Text to be displayed for empty labels.
escapeCancelsEditing	If true, pressing the escape key will stop editing and not accept the new value.
textNode	Reference to the label DOM node that has been hidden.
zIndex	Specifies the zIndex for the textarea.
minResize	Defines the minimum width and height to be used in resize.
wordWrapPadding	Correction factor for word wrapping width.
blurEnabled	If focusLost should be called if textarea loses the focus.
initialValue	Holds the initial editing value to check if the current value was modified.
align	Holds the current temporary horizontal alignment for the cell style.
Functions
init	Creates the textarea and installs the event listeners.
applyValue	Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.
setAlign	Sets the temporary horizontal alignment for the current editing session.
getInitialValue	Gets the initial editing value for the given cell.
getCurrentValue	Returns the current editing value.
isCancelEditingKeyEvent	Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
installListeners	Installs listeners for focus, change and standard key event handling.
isStopEditingEvent	Returns true if the given keydown event should stop cell editing.
isEventSource	Returns true if this editor is the source for the given native event.
resize	Returns modified.
focusLost	Called if the textarea has lost focus.
getBackgroundColor	Returns the background color for the in-place editor.
isLegacyEditor	Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
startEditing	Starts the editor for the given cell.
isSelectText	Returns selectText.
isSelectText	Returns selectText.
stopEditing	Stops the editor and applies the value if cancel is false.
prepareTextarea	Prepares the textarea for getting its value in stopEditing.
isHideLabel	Returns true if the label should be hidden while the cell is being edited.
getMinimumSize	Returns the minimum width and height for editing the given state.
getEditorBounds	Returns the mxRectangle that defines the bounds of the editor.
getEmptyLabelText	Returns the initial label value to be used of the label of the given cell is empty.
getEditingCell	Returns the cell that is currently being edited or null if no cell is being edited.
destroy	Destroys the editor and removes all associated resources.

Functions

mxCellEditor

function mxCellEditor( graph )

Constructs a new in-place editor for the specified graph.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

graph

mxCellEditor.prototype.graph

Reference to the enclosing mxGraph.

textarea

mxCellEditor.prototype.textarea

Holds the DIV that is used for text editing. Note that this may be null before the first edit. Instantiated in init.

editingCell

mxCellEditor.prototype.editingCell

Reference to the mxCell that is currently being edited.

trigger

mxCellEditor.prototype.trigger

Reference to the event that was used to start editing.

modified

mxCellEditor.prototype.modified

Specifies if the label has been modified.

autoSize

mxCellEditor.prototype.autoSize

Specifies if the textarea should be resized while the text is being edited. Default is true.

selectText

mxCellEditor.prototype.selectText

Specifies if the text should be selected when editing starts. Default is true.

emptyLabelText

mxCellEditor.prototype.emptyLabelText

Text to be displayed for empty labels. Default is ‘’ or ‘<br>’ in Firefox as a workaround for the missing cursor bug for empty content editable. This can be set to eg. “[Type Here]” to easier visualize editing of empty labels. The value is only displayed before the first keystroke and is never used as the actual editing value.

escapeCancelsEditing

mxCellEditor.prototype.escapeCancelsEditing

If true, pressing the escape key will stop editing and not accept the new value. Change this to false to accept the new value on escape, and cancel editing on Shift+Escape instead. Default is true.

textNode

mxCellEditor.prototype.textNode

Reference to the label DOM node that has been hidden.

zIndex

mxCellEditor.prototype.zIndex

Specifies the zIndex for the textarea. Default is 5.

minResize

mxCellEditor.prototype.minResize

Defines the minimum width and height to be used in resize. Default is 0x20px.

wordWrapPadding

mxCellEditor.prototype.wordWrapPadding

Correction factor for word wrapping width. Default is 2 in quirks, 0 in IE 11 and 1 in all other browsers and modes.

blurEnabled

mxCellEditor.prototype.blurEnabled

If focusLost should be called if textarea loses the focus. Default is false.

initialValue

mxCellEditor.prototype.initialValue

Holds the initial editing value to check if the current value was modified.

align

mxCellEditor.prototype.align

Holds the current temporary horizontal alignment for the cell style. If this is modified then the current text alignment is changed and the cell style is updated when the value is applied.

Functions

init

mxCellEditor.prototype.init = function ()

Creates the textarea and installs the event listeners. The key handler updates the modified state.

applyValue

mxCellEditor.prototype.applyValue = function( state,
value )

Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.

setAlign

mxCellEditor.prototype.setAlign = function ( align )

Sets the temporary horizontal alignment for the current editing session.

getInitialValue

mxCellEditor.prototype.getInitialValue = function( state,
trigger )

Gets the initial editing value for the given cell.

getCurrentValue

mxCellEditor.prototype.getCurrentValue = function( state )

Returns the current editing value.

isCancelEditingKeyEvent

mxCellEditor.prototype.isCancelEditingKeyEvent = function( evt )

Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.

installListeners

mxCellEditor.prototype.installListeners = function( elt )

Installs listeners for focus, change and standard key event handling.

isStopEditingEvent

mxCellEditor.prototype.isStopEditingEvent = function( evt )

Returns true if the given keydown event should stop cell editing. This returns true if F2 is pressed of if mxGraph.enterStopsCellEditing is true and enter is pressed without control or shift.

isEventSource

mxCellEditor.prototype.isEventSource = function( evt )

Returns true if this editor is the source for the given native event.

resize

mxCellEditor.prototype.resize = function()

Returns modified.

focusLost

mxCellEditor.prototype.focusLost = function()

Called if the textarea has lost focus.

getBackgroundColor

mxCellEditor.prototype.getBackgroundColor = function( state )

Returns the background color for the in-place editor. This implementation always returns null.

isLegacyEditor

mxCellEditor.prototype.isLegacyEditor = function()

Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute. In these cases the text editor must use CSS position absolute to avoid an offset but it will have a less accurate line wrapping width during the text editing preview. This implementation returns true for IE8- and quirks mode or if the CSS position of the SVG element is not absolute.

startEditing

mxCellEditor.prototype.startEditing = function( cell,
trigger )

Starts the editor for the given cell.

Parameters

cell	mxCell to start editing.
trigger	Optional mouse event that triggered the editor.

isSelectText

mxCellEditor.prototype.isSelectText = function()

Returns selectText.

isSelectText

Returns selectText.

stopEditing

mxCellEditor.prototype.stopEditing = function( cancel )

Stops the editor and applies the value if cancel is false.

prepareTextarea

mxCellEditor.prototype.prepareTextarea = function()

Prepares the textarea for getting its value in stopEditing. This implementation removes the extra trailing linefeed in Firefox.

isHideLabel

mxCellEditor.prototype.isHideLabel = function( state )

Returns true if the label should be hidden while the cell is being edited.

getMinimumSize

mxCellEditor.prototype.getMinimumSize = function( state )

Returns the minimum width and height for editing the given state.

getEditorBounds

mxCellEditor.prototype.getEditorBounds = function( state )

Returns the mxRectangle that defines the bounds of the editor.

getEmptyLabelText

mxCellEditor.prototype.getEmptyLabelText = function ( cell )

Returns the initial label value to be used of the label of the given cell is empty. This label is displayed and cleared on the first keystroke. This implementation returns emptyLabelText.

Parameters

cell	mxCell for which a text for an empty editing box should be returned.

getEditingCell

mxCellEditor.prototype.getEditingCell = function ()

Returns the cell that is currently being edited or null if no cell is being edited.

destroy

mxCellEditor.prototype.destroy = function ()

Destroys the editor and removes all associated resources.

mxCellRenderer

Renders cells into a document object model. The defaultShapes is a global map of shapename, constructor pairs that is used in all instances. You can get a list of all available shape names using the following code.

In general the cell renderer is in charge of creating, redrawing and destroying the shape and label associated with a cell state, as well as some other graphical objects, namely controls and overlays. The shape hieararchy in the display (ie. the hierarchy in which the DOM nodes appear in the document) does not reflect the cell hierarchy. The shapes are a (flat) sequence of shapes and labels inside the draw pane of the graph view, with some exceptions, namely the HTML labels being placed directly inside the graph container for certain browsers.

mxLog.show();
for (var i in mxCellRenderer.defaultShapes)
{
  mxLog.debug(i);
}

Summary

Functions
mxCellRenderer	arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.
Variables
defaultShapes	Static array that contains the globally registered shapes which are known to all instances of this class.
defaultEdgeShape	Defines the default shape for edges.
defaultVertexShape	Defines the default shape for vertices.
defaultTextShape	Defines the default shape for labels.
legacyControlPosition	Specifies if the folding icon should ignore the horizontal orientation of a swimlane.
legacySpacing	Specifies if spacing and label position should be ignored if overflow is fill or width.
antiAlias	Anti-aliasing option for new shapes.
minSvgStrokeWidth	Minimum stroke width for SVG output.
forceControlClickHandler	Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs).
Functions
registerShape	Registers the given constructor under the specified key in this instance of the renderer.
initializeShape	Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.
createShape	Creates and returns the shape for the given cell state.
createIndicatorShape	Creates the indicator shape for the given cell state.
getShape	Returns the shape for the given name from defaultShapes.
getShapeConstructor	Returns the constructor to be used for creating the shape.
configureShape	Configures the shape for the given cell state.
postConfigureShape	Replaces any reserved words used for attributes, eg.
checkPlaceholderStyles	Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
resolveColor	Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.
getLabelValue	Returns the value to be used for the label.
createLabel	Creates the label for the given cell state.
initializeLabel	Initiailzes the label with a suitable container.
createCellOverlays	Creates the actual shape for showing the overlay for the given cell state.
initializeOverlay	Initializes the given overlay.
installOverlayListeners	Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.
createControl	Creates the control for the given cell state.
createControlClickHandler	Hook for creating the click handler for the folding icon.
initControl	Initializes the given control and returns the corresponding DOM node.
isShapeEvent	Returns true if the event is for the shape of the given state.
isLabelEvent	Returns true if the event is for the label of the given state.
installListeners	Installs the event listeners for the given cell state.
redrawLabel	Redraws the label for the given cell state.
isTextShapeInvalid	Returns true if the style for the text shape has changed.
redrawLabelShape	Called to invoked redraw on the given text shape.
getTextScale	Returns the scaling used for the label of the given state
getLabelBounds	Returns the bounds to be used to draw the label of the given state.
rotateLabelBounds	Adds the shape rotation to the given label bounds and applies the alignment and offsets.
redrawCellOverlays	Redraws the overlays for the given cell state.
redrawControl	Redraws the control for the given cell state.
getControlBounds	Returns the bounds to be used to draw the control (folding icon) of the given state.
insertStateAfter	Inserts the given array of mxShapes after the given nodes in the DOM.
getShapesForState	Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.
redraw	Updates the bounds or points and scale of the shapes for the given cell state.
redrawShape	Redraws the shape for the given cell state.
doRedrawShape	Invokes redraw on the shape of the given state.
isShapeInvalid	Returns true if the given shape must be repainted.
destroy	Destroys the shapes associated with the given cell state.

Functions

mxCellRenderer

function mxCellRenderer()

Constructs a new cell renderer with the following built-in shapes

arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, swimlane, connector, actor and cloud.

Variables

defaultShapes

mxCellRenderer.defaultShapes

Static array that contains the globally registered shapes which are known to all instances of this class. For adding new shapes you should use the static mxCellRenderer.registerShape function.

defaultEdgeShape

mxCellRenderer.prototype.defaultEdgeShape

Defines the default shape for edges. Default is mxConnector.

defaultVertexShape

mxCellRenderer.prototype.defaultVertexShape

Defines the default shape for vertices. Default is mxRectangleShape.

defaultTextShape

mxCellRenderer.prototype.defaultTextShape

Defines the default shape for labels. Default is mxText.

legacyControlPosition

mxCellRenderer.prototype.legacyControlPosition

Specifies if the folding icon should ignore the horizontal orientation of a swimlane. Default is true.

legacySpacing

mxCellRenderer.prototype.legacySpacing

Specifies if spacing and label position should be ignored if overflow is fill or width. Default is true for backwards compatiblity.

antiAlias

mxCellRenderer.prototype.antiAlias

Anti-aliasing option for new shapes. Default is true.

minSvgStrokeWidth

mxCellRenderer.prototype.minSvgStrokeWidth

Minimum stroke width for SVG output.

forceControlClickHandler

mxCellRenderer.prototype.forceControlClickHandler

Specifies if the enabled state of the graph should be ignored in the control click handler (to allow folding in disabled graphs). Default is false.

Functions

registerShape

mxCellRenderer.registerShape = function( key,
shape )

Registers the given constructor under the specified key in this instance of the renderer.

Example

mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);

Parameters

key	String representing the shape name.
shape	Constructor of the mxShape subclass.

initializeShape

mxCellRenderer.prototype.initializeShape = function( state )

Initializes the shape in the given state by calling its init method with the correct container after configuring it using configureShape.

Parameters

state

mxCellState for which the shape should be initialized.

createShape

mxCellRenderer.prototype.createShape = function( state )

Creates and returns the shape for the given cell state.

Parameters

state

mxCellState for which the shape should be created.

createIndicatorShape

mxCellRenderer.prototype.createIndicatorShape = function( state )

Creates the indicator shape for the given cell state.

Parameters

state

mxCellState for which the indicator shape should be created.

getShape

mxCellRenderer.prototype.getShape = function( name )

Returns the shape for the given name from defaultShapes.

getShapeConstructor

mxCellRenderer.prototype.getShapeConstructor = function( state )

Returns the constructor to be used for creating the shape.

configureShape

mxCellRenderer.prototype.configureShape = function( state )

Configures the shape for the given cell state.

Parameters

state

mxCellState for which the shape should be configured.

postConfigureShape

mxCellRenderer.prototype.postConfigureShape = function( state )

Replaces any reserved words used for attributes, eg. inherit, indicated or swimlane for colors in the shape for the given state. This implementation resolves these keywords on the fill, stroke and gradient color keys.

checkPlaceholderStyles

mxCellRenderer.prototype.checkPlaceholderStyles = function( state )

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

resolveColor

mxCellRenderer.prototype.resolveColor = function( state,
field,
key )

Resolves special keywords ‘inherit’, ‘indicated’ and ‘swimlane’ and sets the respective color on the shape.

getLabelValue

mxCellRenderer.prototype.getLabelValue = function( state )

Returns the value to be used for the label.

Parameters

state

mxCellState for which the label should be created.

createLabel

mxCellRenderer.prototype.createLabel = function( state,
value )

Creates the label for the given cell state.

Parameters

state

mxCellState for which the label should be created.

initializeLabel

mxCellRenderer.prototype.initializeLabel = function( state,
shape )

Initiailzes the label with a suitable container.

Parameters

state

mxCellState whose label should be initialized.

createCellOverlays

mxCellRenderer.prototype.createCellOverlays = function( state )

Creates the actual shape for showing the overlay for the given cell state.

Parameters

state

mxCellState for which the overlay should be created.

initializeOverlay

mxCellRenderer.prototype.initializeOverlay = function( state,
overlay )

Initializes the given overlay.

Parameters

state	mxCellState for which the overlay should be created.
overlay	mxImageShape that represents the overlay.

installOverlayListeners

Installs the listeners for the given mxCellState, mxCellOverlay and mxShape that represents the overlay.

createControl

mxCellRenderer.prototype.createControl = function( state )

Creates the control for the given cell state.

Parameters

state

mxCellState for which the control should be created.

createControlClickHandler

mxCellRenderer.prototype.createControlClickHandler = function( state )

Hook for creating the click handler for the folding icon.

Parameters

state

mxCellState whose control click handler should be returned.

initControl

mxCellRenderer.prototype.initControl = function( state,
control,
handleEvents,
clickHandler )

Initializes the given control and returns the corresponding DOM node.

Parameters

state	mxCellState for which the control should be initialized.
control	mxShape to be initialized.
handleEvents	Boolean indicating if mousedown and mousemove should fire events via the graph.
clickHandler	Optional function to implement clicks on the control.

isShapeEvent

mxCellRenderer.prototype.isShapeEvent = function( state,
evt )

Returns true if the event is for the shape of the given state. This implementation always returns true.

Parameters

state	mxCellState whose shape fired the event.
evt	Mouse event which was fired.

isLabelEvent

mxCellRenderer.prototype.isLabelEvent = function( state,
evt )

Returns true if the event is for the label of the given state. This implementation always returns true.

Parameters

state	mxCellState whose label fired the event.
evt	Mouse event which was fired.

installListeners

mxCellRenderer.prototype.installListeners = function( state )

Installs the event listeners for the given cell state.

Parameters

state

mxCellState for which the event listeners should be isntalled.

redrawLabel

mxCellRenderer.prototype.redrawLabel = function( state,
forced )

Redraws the label for the given cell state.

Parameters

state

mxCellState whose label should be redrawn.

isTextShapeInvalid

mxCellRenderer.prototype.isTextShapeInvalid = function( state,
shape )

Returns true if the style for the text shape has changed.

Parameters

state	mxCellState whose label should be checked.
shape	mxText shape to be checked.

redrawLabelShape

mxCellRenderer.prototype.redrawLabelShape = function( shape )

Called to invoked redraw on the given text shape.

Parameters

shape

mxText shape to be redrawn.

getTextScale

mxCellRenderer.prototype.getTextScale = function( state )

Returns the scaling used for the label of the given state

Parameters

state

mxCellState whose label scale should be returned.

getLabelBounds

mxCellRenderer.prototype.getLabelBounds = function( state )

Returns the bounds to be used to draw the label of the given state.

Parameters

state

mxCellState whose label bounds should be returned.

rotateLabelBounds

mxCellRenderer.prototype.rotateLabelBounds = function( state,
bounds )

Adds the shape rotation to the given label bounds and applies the alignment and offsets.

Parameters

state	mxCellState whose label bounds should be rotated.
bounds	mxRectangle the rectangle to be rotated.

redrawCellOverlays

mxCellRenderer.prototype.redrawCellOverlays = function( state,
forced )

Redraws the overlays for the given cell state.

Parameters

state

mxCellState whose overlays should be redrawn.

redrawControl

mxCellRenderer.prototype.redrawControl = function( state,
forced )

Redraws the control for the given cell state.

Parameters

state

mxCellState whose control should be redrawn.

getControlBounds

mxCellRenderer.prototype.getControlBounds = function( state,
w,
h )

Returns the bounds to be used to draw the control (folding icon) of the given state.

insertStateAfter

mxCellRenderer.prototype.insertStateAfter = function( state,
node,
htmlNode )

Inserts the given array of mxShapes after the given nodes in the DOM.

Parameters

shapes	Array of mxShapes to be inserted.
node	Node in <drawPane> after which the shapes should be inserted.
htmlNode	Node in the graph container after which the shapes should be inserted that will not go into the <drawPane> (eg. HTML labels without foreignObjects).

getShapesForState

mxCellRenderer.prototype.getShapesForState = function( state )

Returns the mxShapes for the given cell state in the order in which they should appear in the DOM.

Parameters

state

mxCellState whose shapes should be returned.

redraw

mxCellRenderer.prototype.redraw = function( state,
force,
rendering )

Updates the bounds or points and scale of the shapes for the given cell state. This is called in mxGraphView.validatePoints as the last step of updating all cells.

Parameters

state	mxCellState for which the shapes should be updated.
force	Optional boolean that specifies if the cell should be reconfiured and redrawn without any additional checks.
rendering	Optional boolean that specifies if the cell should actually be drawn into the DOM. If this is false then redraw and/or reconfigure will not be called on the shape.

redrawShape

mxCellRenderer.prototype.redrawShape = function( state,
force,
rendering )

Redraws the shape for the given cell state.

Parameters

state

mxCellState whose label should be redrawn.

doRedrawShape

mxCellRenderer.prototype.doRedrawShape = function( state )

Invokes redraw on the shape of the given state.

isShapeInvalid

mxCellRenderer.prototype.isShapeInvalid = function( state,
shape )

Returns true if the given shape must be repainted.

destroy

mxCellRenderer.prototype.destroy = function( state )

Destroys the shapes associated with the given cell state.

Parameters

state

mxCellState for which the shapes should be destroyed.

mxEdgeStyle

Provides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.

Example

var style = stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

Sets the default edge style to ElbowConnector.

Custom edge style

To write a custom edge style, a function must be added to the mxEdgeStyle object as follows:

mxEdgeStyle.MyStyle = function(state, source, target, points, result)
{
  if (source != null && target != null)
  {
    var pt = new mxPoint(target.getCenterX(), source.getCenterY());

    if (mxUtils.contains(source, pt.x, pt.y))
    {
      pt.y = source.y + source.height;
    }

    result.push(pt);
  }
};

In the above example, a right angle is created using a point on the horizontal center of the target vertex and the vertical center of the source vertex. The code checks if that point intersects the source vertex and makes the edge straight if it does. The point is then added into the result array, which acts as the return value of the function.

The new edge style should then be registered in the mxStyleRegistry as follows

mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle);

The custom edge style above can now be used in a specific edge as follows

model.setStyle(edge, 'edgeStyle=myEdgeStyle');

Note that the key of the mxStyleRegistry entry for the function should be used in string values, unless mxGraphView.allowEval is true, in which case you can also use mxEdgeStyle.MyStyle for the value in the cell style above.

Or it can be used for all edges in the graph as follows

var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;

Note that the object can be used directly when programmatically setting the value, but the key in the mxStyleRegistry should be used when setting the value via a key, value pair in a cell style.

Summary

Functions
EntityRelation	Implements an entity relation style for edges (as used in database schema diagrams).
Loop	Implements a self-reference, aka.
ElbowConnector	Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSide	Implements a vertical elbow edge.
TopToBottom	Implements a horizontal elbow edge.
SegmentConnector	Implements an orthogonal edge style.
OrthConnector	Implements a local orthogonal router between the given cells.

Functions

EntityRelation

EntityRelation: function ( state,
source,
target,
points,
result )

Implements an entity relation style for edges (as used in database schema diagrams). At the time the function is called, the result array contains a placeholder (null) for the first absolute point, that is, the point where the edge and source terminal are connected. The implementation of the style then adds all intermediate waypoints except for the last point, that is, the connection point between the edge and the target terminal. The first ant the last point in the result array are then replaced with mxPoints that take into account the terminal’s perimeter and next point on the edge.

Parameters

state	mxCellState that represents the edge to be updated.
source	mxCellState that represents the source terminal.
target	mxCellState that represents the target terminal.
points	List of relative control points.
result	Array of mxPoints that represent the actual points of the edge.

Loop

Loop: function ( state,
source,
target,
points,
result )

Implements a self-reference, aka. loop.

ElbowConnector

ElbowConnector: function ( state,
source,
target,
points,
result )

Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style. SideToSide is used if horizontal is true or unspecified. See EntityRelation for a description of the parameters.

SideToSide

SideToSide: function ( state,
source,
target,
points,
result )

Implements a vertical elbow edge. See EntityRelation for a description of the parameters.

TopToBottom

TopToBottom: function( state,
source,
target,
points,
result )

Implements a horizontal elbow edge. See EntityRelation for a description of the parameters.

SegmentConnector

SegmentConnector: function( state,
source,
target,
hints,
result )

Implements an orthogonal edge style. Use <mxEdgeSegmentHandler> as an interactive handler for this style.

OrthConnector

OrthConnector: function( state,
source,
target,
points,
result )

Implements a local orthogonal router between the given cells.

Parameters

state	mxCellState that represents the edge to be updated.
source	mxCellState that represents the source terminal.
target	mxCellState that represents the target terminal.
points	List of relative control points.
result	Array of mxPoints that represent the actual points of the edge.

mxStyleRegistry

Singleton class that acts as a global converter from string to object values in a style. This is currently only used to perimeters and edge styles.

Summary

Variables
values	Maps from strings to objects.
Functions
putValue	Puts the given object into the registry under the given name.
getValue	Returns the value associated with the given name.
getName	Returns the name for the given value.

Variables

values

Maps from strings to objects.

Functions

putValue

putValue: function( name,
obj )

Puts the given object into the registry under the given name.

getValue

getValue: function( name )

Returns the value associated with the given name.

getName

getName: function( value )

Returns the name for the given value.

mxGraphView

Extends mxEventSource to implement a view for a graph. This class is in charge of computing the absolute coordinates for the relative child geometries, the points for perimeters and edge styles and keeping them cached in mxCellStates for faster retrieval. The states are updated whenever the model or the view state (translate, scale) changes. The scale and translate are honoured in the bounds.

Summary

Events
mxEvent.UNDO	Fires after the root was changed in setCurrentRoot.
mxEvent.SCALE_AND_TRANSLATE	Fires after the scale and translate have been changed in scaleAndTranslate.
mxEvent.SCALE	Fires after the scale was changed in setScale.
mxEvent.TRANSLATE	Fires after the translate was changed in setTranslate.
mxEvent.DOWN and mxEvent.UP	Fire if the current root is changed by executing an mxCurrentRootChange.
Functions
mxGraphView	Constructs a new view for the given mxGraph.
Variables
doneResource	Specifies the resource key for the status message after a long operation.
Functions
updatingDocumentResource	Specifies the resource key for the status message while the document is being updated.
Variables
allowEval	Specifies if string values in cell styles should be evaluated using mxUtils.eval.
captureDocumentGesture	Specifies if a gesture should be captured when it goes outside of the graph container.
optimizeVmlReflows	Specifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode.
rendering	Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph.
graph	Reference to the enclosing mxGraph.
currentRoot	mxCell that acts as the root of the displayed cell hierarchy.
graphBounds	mxRectangle that caches the scales, translated bounds of the current view.
scale	Specifies the scale.
translate	mxPoint that specifies the current translation.
states	mxDictionary that maps from cell IDs to mxCellStates.
updateStyle	Specifies if the style should be updated in each validation step.
lastNode	During validation, this contains the last DOM node that was processed.
lastHtmlNode	During validation, this contains the last HTML DOM node that was processed.
lastForegroundNode	During validation, this contains the last edge’s DOM node that was processed.
lastForegroundHtmlNode	During validation, this contains the last edge HTML DOM node that was processed.
Functions
getGraphBounds	Returns graphBounds.
setGraphBounds	Sets graphBounds.
getBounds	Returns the union of all mxCellStates for the given array of mxCells.
setCurrentRoot	Sets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.
scaleAndTranslate	Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.
getScale	Returns the scale.
setScale	Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.
getTranslate	Returns the translate.
setTranslate	Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange.
viewStateChanged	Invoked after scale and/or translate has changed.
refresh	Clears the view if currentRoot is not null and revalidates.
revalidate	Revalidates the complete view with all cell states.
clear	Removes the state of the given cell and all descendants if the given cell is not the current root.
invalidate	Invalidates the state of the given cell, all its descendants and connected edges.
validate	Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox.
getEmptyBounds	Returns the bounds for an empty graph.
getBoundingBox	Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.
createBackgroundPageShape	Creates and returns the shape used as the background page.
validateBackground	Calls validateBackgroundImage and validateBackgroundPage.
validateBackgroundImage	Validates the background image.
validateBackgroundPage	Validates the background page.
getBackgroundPageBounds	Returns the bounds for the background page.
redrawBackgroundImage	Updates the bounds and redraws the background image.
validateCell	Recursively creates the cell state for the given cell if visible is true and the given cell is visible.
validateCellState	Validates and repaints the mxCellState for the given mxCell.
updateCellState	Updates the given mxCellState.
isCellCollapsed	Returns true if the children of the given cell should not be visible in the view.
updateVertexState	Validates the given cell state.
updateEdgeState	Validates the given cell state.
updateVertexLabelOffset	Updates the absoluteOffset of the given vertex cell state.
resetValidationState	Resets the current validation state.
stateValidated	Invoked when a state has been processed in <validatePoints>.
updateFixedTerminalPoints	Sets the initial absolute terminal points in the given state before the edge style is computed.
updateFixedTerminalPoint	Sets the fixed source or target terminal point on the given edge.
getFixedTerminalPoint	Returns the fixed source or target terminal point for the given edge.
updateBoundsFromStencil	Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.
updatePoints	Updates the absolute points in the given state using the specified array of mxPoints as the relative points.
transformControlPoint	Transforms the given control point to an absolute point.
isLoopStyleEnabled	Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge.
getEdgeStyle	Returns the edge style function to be used to render the given edge state.
updateFloatingTerminalPoints	Updates the terminal points in the given state after the edge style was computed for the edge.
updateFloatingTerminalPoint	Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.
getFloatingTerminalPoint	Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.
getTerminalPort	Returns an mxCellState that represents the source or target terminal or port for the given edge.
getPerimeterPoint	Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.
getRoutingCenterX	Returns the x-coordinate of the center point for automatic routing.
getRoutingCenterY	Returns the y-coordinate of the center point for automatic routing.
getPerimeterBounds	Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.
getPerimeterFunction	Returns the perimeter function for the given state.
getNextPoint	Returns the nearest point in the list of absolute points or the center of the opposite terminal.
getVisibleTerminal	Returns the nearest ancestor terminal that is visible.
updateEdgeBounds	Updates the given state using the bounding box of t he absolute points.
getPoint	Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint.
getRelativePoint	Gets the relative point that describes the given, absolute label position for the given edge state.
updateEdgeLabelOffset	Updates mxCellState.absoluteOffset for the given state.
getState	Returns the mxCellState for the given cell.
isRendering	Returns rendering.
setRendering	Sets rendering.
isAllowEval	Returns allowEval.
setAllowEval	Sets allowEval.
getStates	Returns states.
setStates	Sets states.
getCellStates	Returns the mxCellStates for the given array of mxCells.
removeState	Removes and returns the mxCellState for the given cell.
createState	Creates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.
getCanvas	Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.
getBackgroundPane	Returns the DOM node that represents the background layer.
getDrawPane	Returns the DOM node that represents the main drawing layer.
getOverlayPane	Returns the DOM node that represents the layer above the drawing layer.
getDecoratorPane	Returns the DOM node that represents the topmost drawing layer.
isContainerEvent	Returns true if the event origin is one of the drawing panes or containers of the view.
isScrollEvent	Returns true if the event origin is one of the scrollbars of the container in IE.
init	Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.
installListeners	Installs the required listeners in the container.
create	Creates the DOM nodes for the HTML display.
updateHtmlCanvasSize	Updates the size of the HTML canvas.
createHtmlPane	Creates and returns a drawing pane in HTML (DIV).
create	Creates the DOM nodes for the VML display.
createVmlPane	Creates a drawing pane in VML (group).
create	Creates and returns the DOM nodes for the SVG display.
updateContainerStyle	Updates the style of the container after installing the SVG DOM elements.
destroy	Destroys the view and all its resources.

Events

mxEvent.UNDO

Fires after the root was changed in setCurrentRoot. The <code>edit</code> property contains the mxUndoableEdit which contains the mxCurrentRootChange.

mxEvent.SCALE_AND_TRANSLATE

Fires after the scale and translate have been changed in scaleAndTranslate. The <code>scale</code>, <code>previousScale</code>, <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous scale and translate, respectively.

mxEvent.SCALE

Fires after the scale was changed in setScale. The <code>scale</code> and <code>previousScale</code> properties contain the new and previous scale.

mxEvent.TRANSLATE

Fires after the translate was changed in setTranslate. The <code>translate</code> and <code>previousTranslate</code> properties contain the new and previous value for translate.

mxEvent.DOWN and mxEvent.UP

Fire if the current root is changed by executing an mxCurrentRootChange. The event name depends on the location of the root in the cell hierarchy with respect to the current root. The <code>root</code> and <code>previous</code> properties contain the new and previous root, respectively.

Functions

mxGraphView

function mxGraphView( graph )

Constructs a new view for the given mxGraph.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

doneResource

mxGraphView.prototype.doneResource

Specifies the resource key for the status message after a long operation. If the resource for this key does not exist then the value is used as the status message. Default is ‘done’.

Functions

updatingDocumentResource

Specifies the resource key for the status message while the document is being updated. If the resource for this key does not exist then the value is used as the status message. Default is ‘updatingDocument’.

Variables

allowEval

mxGraphView.prototype.allowEval

Specifies if string values in cell styles should be evaluated using mxUtils.eval. This will only be used if the string values can’t be mapped to objects using mxStyleRegistry. Default is false. NOTE: Enabling this switch carries a possible security risk.

captureDocumentGesture

mxGraphView.prototype.captureDocumentGesture

Specifies if a gesture should be captured when it goes outside of the graph container. Default is true.

optimizeVmlReflows

mxGraphView.prototype.optimizeVmlReflows

Specifies if the <canvas> should be hidden while rendering in IE8 standards mode and quirks mode. This will significantly improve rendering performance. Default is true.

rendering

mxGraphView.prototype.rendering

Specifies if shapes should be created, updated and destroyed using the methods of mxCellRenderer in graph. Default is true.

graph

mxGraphView.prototype.graph

Reference to the enclosing mxGraph.

currentRoot

mxGraphView.prototype.currentRoot

mxCell that acts as the root of the displayed cell hierarchy.

graphBounds

mxGraphView.prototype.graphBounds

mxRectangle that caches the scales, translated bounds of the current view.

scale

mxGraphView.prototype.scale

Specifies the scale. Default is 1 (100%).

translate

mxGraphView.prototype.translate

mxPoint that specifies the current translation. Default is a new empty mxPoint.

states

mxGraphView.prototype.states

mxDictionary that maps from cell IDs to mxCellStates.

updateStyle

mxGraphView.prototype.updateStyle

Specifies if the style should be updated in each validation step. If this is false then the style is only updated if the state is created or if the style of the cell was changed. Default is false.

lastNode

mxGraphView.prototype.lastNode

During validation, this contains the last DOM node that was processed.

lastHtmlNode

mxGraphView.prototype.lastHtmlNode

During validation, this contains the last HTML DOM node that was processed.

lastForegroundNode

mxGraphView.prototype.lastForegroundNode

During validation, this contains the last edge’s DOM node that was processed.

lastForegroundHtmlNode

mxGraphView.prototype.lastForegroundHtmlNode

During validation, this contains the last edge HTML DOM node that was processed.

Functions

getGraphBounds

mxGraphView.prototype.getGraphBounds = function()

Returns graphBounds.

setGraphBounds

mxGraphView.prototype.setGraphBounds = function( value )

Sets graphBounds.

getBounds

mxGraphView.prototype.getBounds = function( cells )

Returns the union of all mxCellStates for the given array of mxCells.

Parameters

cells

Array of mxCells whose bounds should be returned.

setCurrentRoot

mxGraphView.prototype.setCurrentRoot = function( root )

Sets and returns the current root and fires an <undo> event before calling mxGraph.sizeDidChange.

Parameters

root	mxCell that specifies the root of the displayed cell hierarchy.

scaleAndTranslate

mxGraphView.prototype.scaleAndTranslate = function( scale,
dx,
dy )

Sets the scale and translation and fires a scale and translate event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

scale	Decimal value that specifies the new scale (1 is 100%).
dx	X-coordinate of the translation.
dy	Y-coordinate of the translation.

getScale

mxGraphView.prototype.getScale = function()

Returns the scale.

setScale

mxGraphView.prototype.setScale = function( value )

Sets the scale and fires a scale event before calling revalidate followed by mxGraph.sizeDidChange.

Parameters

value

Decimal value that specifies the new scale (1 is 100%).

getTranslate

mxGraphView.prototype.getTranslate = function()

Returns the translate.

setTranslate

mxGraphView.prototype.setTranslate = function( dx,
dy )

Sets the translation and fires a translate event before calling revalidate followed by mxGraph.sizeDidChange. The translation is the negative of the origin.

Parameters

dx	X-coordinate of the translation.
dy	Y-coordinate of the translation.

viewStateChanged

mxGraphView.prototype.viewStateChanged = function()

Invoked after scale and/or translate has changed.

refresh

mxGraphView.prototype.refresh = function()

Clears the view if currentRoot is not null and revalidates.

revalidate

mxGraphView.prototype.revalidate = function()

Revalidates the complete view with all cell states.

clear

mxGraphView.prototype.clear = function( cell,
force,
recurse )

Removes the state of the given cell and all descendants if the given cell is not the current root.

Parameters

cell	Optional mxCell for which the state should be removed. Default is the root of the model.
force	Boolean indicating if the current root should be ignored for recursion.

invalidate

mxGraphView.prototype.invalidate = function( cell,
recurse,
includeEdges )

Invalidates the state of the given cell, all its descendants and connected edges.

Parameters

cell	Optional mxCell to be invalidated. Default is the root of the model.

validate

mxGraphView.prototype.validate = function( cell )

Calls validateCell and validateCellState and updates the graphBounds using getBoundingBox. Finally the background is validated using validateBackground.

Parameters

cell	Optional mxCell to be used as the root of the validation. Default is currentRoot or the root of the model.

getEmptyBounds

mxGraphView.prototype.getEmptyBounds = function()

Returns the bounds for an empty graph. This returns a rectangle at translate with the size of 0 x 0.

getBoundingBox

mxGraphView.prototype.getBoundingBox = function( state,
recurse )

Returns the bounding box of the shape and the label for the given mxCellState and its children if recurse is true.

Parameters

state	mxCellState whose bounding box should be returned.
recurse	Optional boolean indicating if the children should be included. Default is true.

createBackgroundPageShape

mxGraphView.prototype.createBackgroundPageShape = function( bounds )

Creates and returns the shape used as the background page.

Parameters

bounds

mxRectangle that represents the bounds of the shape.

validateBackground

mxGraphView.prototype.validateBackground = function()

Calls validateBackgroundImage and validateBackgroundPage.

validateBackgroundImage

mxGraphView.prototype.validateBackgroundImage = function()

Validates the background image.

validateBackgroundPage

mxGraphView.prototype.validateBackgroundPage = function()

Validates the background page.

getBackgroundPageBounds

mxGraphView.prototype.getBackgroundPageBounds = function()

Returns the bounds for the background page.

redrawBackgroundImage

mxGraphView.prototype.redrawBackgroundImage = function( backgroundImage,
bg )

Updates the bounds and redraws the background image.

Example

If the background image should not be scaled, this can be replaced with the following.

mxGraphView.prototype.redrawBackground = function(backgroundImage, bg)
{
  backgroundImage.bounds.x = this.translate.x;
  backgroundImage.bounds.y = this.translate.y;
  backgroundImage.bounds.width = bg.width;
  backgroundImage.bounds.height = bg.height;

  backgroundImage.redraw();
};

Parameters

backgroundImage	mxImageShape that represents the background image.
bg	mxImage that specifies the image and its dimensions.

validateCell

mxGraphView.prototype.validateCell = function( cell,
visible )

Recursively creates the cell state for the given cell if visible is true and the given cell is visible. If the cell is not visible but the state exists then it is removed using removeState.

Parameters

cell	mxCell whose mxCellState should be created.
visible	Optional boolean indicating if the cell should be visible. Default is true.

validateCellState

mxGraphView.prototype.validateCellState = function( cell,
recurse )

Validates and repaints the mxCellState for the given mxCell.

Parameters

cell	mxCell whose mxCellState should be validated.
recurse	Optional boolean indicating if the children of the cell should be validated. Default is true.

updateCellState

mxGraphView.prototype.updateCellState = function( state )

Updates the given mxCellState.

Parameters

state

mxCellState to be updated.

isCellCollapsed

mxGraphView.prototype.isCellCollapsed = function( cell )

Returns true if the children of the given cell should not be visible in the view. This implementation uses mxGraph.isCellVisible but it can be overidden to use a separate condition.

updateVertexState

mxGraphView.prototype.updateVertexState = function( state,
geo )

Validates the given cell state.

updateEdgeState

mxGraphView.prototype.updateEdgeState = function( state,
geo )

Validates the given cell state.

updateVertexLabelOffset

mxGraphView.prototype.updateVertexLabelOffset = function( state )

Updates the absoluteOffset of the given vertex cell state. This takes into account the label position styles.

Parameters

state

mxCellState whose absolute offset should be updated.

resetValidationState

mxGraphView.prototype.resetValidationState = function()

Resets the current validation state.

stateValidated

mxGraphView.prototype.stateValidated = function( state )

Invoked when a state has been processed in <validatePoints>. This is used to update the order of the DOM nodes of the shape.

Parameters

state

mxCellState that represents the cell state.

updateFixedTerminalPoints

mxGraphView.prototype.updateFixedTerminalPoints = function( edge,
source,
target )

Sets the initial absolute terminal points in the given state before the edge style is computed.

Parameters

edge	mxCellState whose initial terminal points should be updated.
source	mxCellState which represents the source terminal.
target	mxCellState which represents the target terminal.

updateFixedTerminalPoint

mxGraphView.prototype.updateFixedTerminalPoint = function( edge,
terminal,
source,
constraint )

Sets the fixed source or target terminal point on the given edge.

Parameters

edge	mxCellState whose terminal point should be updated.
terminal	mxCellState which represents the actual terminal.
source	Boolean that specifies if the terminal is the source.
constraint	mxConnectionConstraint that specifies the connection.

getFixedTerminalPoint

mxGraphView.prototype.getFixedTerminalPoint = function( edge,
terminal,
source,
constraint )

Returns the fixed source or target terminal point for the given edge.

Parameters

edge	mxCellState whose terminal point should be returned.
terminal	mxCellState which represents the actual terminal.
source	Boolean that specifies if the terminal is the source.
constraint	mxConnectionConstraint that specifies the connection.

updateBoundsFromStencil

mxGraphView.prototype.updateBoundsFromStencil = function( state )

Updates the bounds of the given cell state to reflect the bounds of the stencil if it has a fixed aspect and returns the previous bounds as an mxRectangle if the bounds have been modified or null otherwise.

Parameters

edge	mxCellState whose bounds should be updated.

updatePoints

mxGraphView.prototype.updatePoints = function( edge,
points,
source,
target )

Updates the absolute points in the given state using the specified array of mxPoints as the relative points.

Parameters

edge	mxCellState whose absolute points should be updated.
points	Array of mxPoints that constitute the relative points.
source	mxCellState that represents the source terminal.
target	mxCellState that represents the target terminal.

transformControlPoint

mxGraphView.prototype.transformControlPoint = function( state,
pt )

Transforms the given control point to an absolute point.

isLoopStyleEnabled

mxGraphView.prototype.isLoopStyleEnabled = function( edge,
points,
source,
target )

Returns true if the given edge should be routed with mxGraph.defaultLoopStyle or the mxConstants.STYLE_LOOP defined for the given edge. This implementation returns true if the given edge is a loop and does not have connections constraints associated.

getEdgeStyle

mxGraphView.prototype.getEdgeStyle = function( edge,
points,
source,
target )

Returns the edge style function to be used to render the given edge state.

updateFloatingTerminalPoints

mxGraphView.prototype.updateFloatingTerminalPoints = function( state,
source,
target )

Updates the terminal points in the given state after the edge style was computed for the edge.

Parameters

state	mxCellState whose terminal points should be updated.
source	mxCellState that represents the source terminal.
target	mxCellState that represents the target terminal.

updateFloatingTerminalPoint

mxGraphView.prototype.updateFloatingTerminalPoint = function( edge,
start,
end,
source )

Updates the absolute terminal point in the given state for the given start and end state, where start is the source if source is true.

Parameters

edge	mxCellState whose terminal point should be updated.
start	mxCellState for the terminal on “this” side of the edge.
end	mxCellState for the terminal on the other side of the edge.
source	Boolean indicating if start is the source terminal state.

getFloatingTerminalPoint

mxGraphView.prototype.getFloatingTerminalPoint = function( edge,
start,
end,
source )

Returns the floating terminal point for the given edge, start and end state, where start is the source if source is true.

Parameters

edge	mxCellState whose terminal point should be returned.
start	mxCellState for the terminal on “this” side of the edge.
end	mxCellState for the terminal on the other side of the edge.
source	Boolean indicating if start is the source terminal state.

getTerminalPort

mxGraphView.prototype.getTerminalPort = function( state,
terminal,
source )

Returns an mxCellState that represents the source or target terminal or port for the given edge.

Parameters

state	mxCellState that represents the state of the edge.
terminal	mxCellState that represents the terminal.
source	Boolean indicating if the given terminal is the source terminal.

getPerimeterPoint

mxGraphView.prototype.getPerimeterPoint = function( terminal,
next,
orthogonal,
border )

Returns an mxPoint that defines the location of the intersection point between the perimeter and the line between the center of the shape and the given point.

Parameters

terminal	mxCellState for the source or target terminal.
next	mxPoint that lies outside of the given terminal.
orthogonal	Boolean that specifies if the orthogonal projection onto the perimeter should be returned. If this is false then the intersection of the perimeter and the line between the next and the center point is returned.
border	Optional border between the perimeter and the shape.

getRoutingCenterX

mxGraphView.prototype.getRoutingCenterX = function ( state )

Returns the x-coordinate of the center point for automatic routing.

getRoutingCenterY

mxGraphView.prototype.getRoutingCenterY = function ( state )

Returns the y-coordinate of the center point for automatic routing.

getPerimeterBounds

mxGraphView.prototype.getPerimeterBounds = function( terminal,
border )

Returns the perimeter bounds for the given terminal, edge pair as an mxRectangle.

If you have a model where each terminal has a relative child that should act as the graphical endpoint for a connection from/to the terminal, then this method can be replaced as follows:

var oldGetPerimeterBounds = mxGraphView.prototype.getPerimeterBounds;
mxGraphView.prototype.getPerimeterBounds = function(terminal, edge, isSource)
{
  var model = this.graph.getModel();
  var childCount = model.getChildCount(terminal.cell);

  if (childCount > 0)
  {
    var child = model.getChildAt(terminal.cell, 0);
    var geo = model.getGeometry(child);

    if (geo != null &&
        geo.relative)
    {
      var state = this.getState(child);

      if (state != null)
      {
        terminal = state;
      }
    }
  }

  return oldGetPerimeterBounds.apply(this, arguments);
};

Parameters

terminal	mxCellState that represents the terminal.
border	Number that adds a border between the shape and the perimeter.

getPerimeterFunction

mxGraphView.prototype.getPerimeterFunction = function( state )

Returns the perimeter function for the given state.

getNextPoint

mxGraphView.prototype.getNextPoint = function( edge,
opposite,
source )

Returns the nearest point in the list of absolute points or the center of the opposite terminal.

Parameters

edge	mxCellState that represents the edge.
opposite	mxCellState that represents the opposite terminal.
source	Boolean indicating if the next point for the source or target should be returned.

getVisibleTerminal

mxGraphView.prototype.getVisibleTerminal = function( edge,
source )

Returns the nearest ancestor terminal that is visible. The edge appears to be connected to this terminal on the display. The result of this method is cached in mxCellState.getVisibleTerminalState.

Parameters

edge	mxCell whose visible terminal should be returned.
source	Boolean that specifies if the source or target terminal should be returned.

updateEdgeBounds

mxGraphView.prototype.updateEdgeBounds = function( state )

Updates the given state using the bounding box of t he absolute points. Also updates mxCellState.terminalDistance, mxCellState.length and mxCellState.segments.

Parameters

state

mxCellState whose bounds should be updated.

getPoint

mxGraphView.prototype.getPoint = function( state,
geometry )

Returns the absolute point on the edge for the given relative mxGeometry as an mxPoint. The edge is represented by the given mxCellState.

Parameters

state	mxCellState that represents the state of the parent edge.
geometry	mxGeometry that represents the relative location.

getRelativePoint

mxGraphView.prototype.getRelativePoint = function( edgeState,
x,
y )

Gets the relative point that describes the given, absolute label position for the given edge state.

Parameters

state	mxCellState that represents the state of the parent edge.
x	Specifies the x-coordinate of the absolute label location.
y	Specifies the y-coordinate of the absolute label location.

updateEdgeLabelOffset

mxGraphView.prototype.updateEdgeLabelOffset = function( state )

Updates mxCellState.absoluteOffset for the given state. The absolute offset is normally used for the position of the edge label. Is is calculated from the geometry as an absolute offset from the center between the two endpoints if the geometry is absolute, or as the relative distance between the center along the line and the absolute orthogonal distance if the geometry is relative.

Parameters

state

mxCellState whose absolute offset should be updated.

getState

mxGraphView.prototype.getState = function( cell,
create )

Returns the mxCellState for the given cell. If create is true, then the state is created if it does not yet exist.

Parameters

cell	mxCell for which the mxCellState should be returned.
create	Optional boolean indicating if a new state should be created if it does not yet exist. Default is false.

isRendering

mxGraphView.prototype.isRendering = function()

Returns rendering.

setRendering

mxGraphView.prototype.setRendering = function( value )

Sets rendering.

isAllowEval

mxGraphView.prototype.isAllowEval = function()

Returns allowEval.

setAllowEval

mxGraphView.prototype.setAllowEval = function( value )

Sets allowEval.

getStates

mxGraphView.prototype.getStates = function()

Returns states.

setStates

mxGraphView.prototype.setStates = function( value )

Sets states.

getCellStates

mxGraphView.prototype.getCellStates = function( cells )

Returns the mxCellStates for the given array of mxCells. The array contains all states that are not null, that is, the returned array may have less elements than the given array. If no argument is given, then this returns states.

removeState

mxGraphView.prototype.removeState = function( cell )

Removes and returns the mxCellState for the given cell.

Parameters

cell	mxCell for which the mxCellState should be removed.

createState

mxGraphView.prototype.createState = function( cell )

Creates and returns an mxCellState for the given cell and initializes it using <mxCellRenderer.initialize>.

Parameters

cell	mxCell for which a new mxCellState should be created.

getCanvas

mxGraphView.prototype.getCanvas = function()

Returns the DOM node that contains the background-, draw- and overlay- and decoratorpanes.

getBackgroundPane

mxGraphView.prototype.getBackgroundPane = function()

Returns the DOM node that represents the background layer.

getDrawPane

mxGraphView.prototype.getDrawPane = function()

Returns the DOM node that represents the main drawing layer.

getOverlayPane

mxGraphView.prototype.getOverlayPane = function()

Returns the DOM node that represents the layer above the drawing layer.

getDecoratorPane

mxGraphView.prototype.getDecoratorPane = function()

Returns the DOM node that represents the topmost drawing layer.

isContainerEvent

mxGraphView.prototype.isContainerEvent = function( evt )

Returns true if the event origin is one of the drawing panes or containers of the view.

isScrollEvent

mxGraphView.prototype.isScrollEvent = function( evt )

Returns true if the event origin is one of the scrollbars of the container in IE. Such events are ignored.

init

mxGraphView.prototype.init = function()

Initializes the graph event dispatch loop for the specified container and invokes create to create the required DOM nodes for the display.

installListeners

mxGraphView.prototype.installListeners = function()

Installs the required listeners in the container.

create

mxGraphView.prototype.createHtml = function()

Creates the DOM nodes for the HTML display.

updateHtmlCanvasSize

mxGraphView.prototype.updateHtmlCanvasSize = function( width,
height )

Updates the size of the HTML canvas.

createHtmlPane

mxGraphView.prototype.createHtmlPane = function( width,
height )

Creates and returns a drawing pane in HTML (DIV).

create

mxGraphView.prototype.createVml = function()

Creates the DOM nodes for the VML display.

createVmlPane

mxGraphView.prototype.createVmlPane = function( width,
height )

Creates a drawing pane in VML (group).

create

mxGraphView.prototype.createSvg = function()

Creates and returns the DOM nodes for the SVG display.

updateContainerStyle

mxGraphView.prototype.updateContainerStyle = function( container )

Updates the style of the container after installing the SVG DOM elements.

destroy

mxGraphView.prototype.destroy = function()

Destroys the view and all its resources.

mxCurrentRootChange

Action to change the current root in a view.

Summary

Functions
mxCurrentRootChange	Constructs a change of the current root in the given view.
execute	Changes the current root of the view.

Functions

mxCurrentRootChange

function mxCurrentRootChange( view,
root )

Constructs a change of the current root in the given view.

execute

mxCurrentRootChange.prototype.execute = function()

Changes the current root of the view.

mxGraph

Extends mxEventSource to implement a graph component for the browser. This is the main class of the package. To activate panning and connections use setPanning and setConnectable. For rubberband selection you must create a new instance of mxRubberband. The following listeners are added to mouseListeners by default:

<tooltipHandler>: mxTooltipHandler that displays tooltips
<panningHandler>: mxPanningHandler for panning and popup menus
<connectionHandler>: mxConnectionHandler for creating connections
<graphHandler>: mxGraphHandler for moving and cloning cells

These listeners will be called in the above order if they are enabled.

Background Images

To display a background image, set the image, image width and image height using setBackgroundImage. If one of the above values has changed then the view’s mxGraphView.validate should be invoked.

Cell Images

To use images in cells, a shape must be specified in the default vertex style (or any named style). Possible shapes are mxConstants.SHAPE_IMAGE and mxConstants.SHAPE_LABEL. The code to change the shape used in the default vertex style, the following code is used:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;

For the default vertex style, the image to be displayed can be specified in a cell’s style using the mxConstants.STYLE_IMAGE key and the image URL as a value, for example:

image=http://www.example.com/image.gif

For a named style, the the stylename must be the first element of the cell style:

stylename;image=http://www.example.com/image.gif

A cell style can have any number of key=value pairs added, divided by a semicolon as follows:

[stylename;|key=value;]

Labels

The cell labels are defined by getLabel which uses convertValueToString if labelsVisible is true. If a label must be rendered as HTML markup, then isHtmlLabel should return true for the respective cell. If all labels contain HTML markup, htmlLabels can be set to true. NOTE: Enabling HTML labels carries a possible security risk (see the section on security in the manual).

If wrapping is needed for a label, then isHtmlLabel and isWrapping must return true for the cell whose label should be wrapped. See isWrapping for an example.

If clipping is needed to keep the rendering of a HTML label inside the bounds of its vertex, then <isClipping> should return true for the respective cell.

By default, edge labels are movable and vertex labels are fixed. This can be changed by setting edgeLabelsMovable and vertexLabelsMovable, or by overriding isLabelMovable.

In-place Editing

In-place editing is started with a doubleclick or by typing F2. Programmatically, <edit> is used to check if the cell is editable (isCellEditable) and call startEditingAtCell, which invokes mxCellEditor.startEditing. The editor uses the value returned by getEditingValue as the editing value.

After in-place editing, labelChanged is called, which invokes mxGraphModel.setValue, which in turn calls mxGraphModel.valueForCellChanged via mxValueChange.

The event that triggers in-place editing is passed through to the cellEditor, which may take special actions depending on the type of the event or mouse location, and is also passed to getEditingValue. The event is then passed back to the event processing functions which can perform specific actions based on the trigger event.

Tooltips

Tooltips are implemented by getTooltip, which calls getTooltipForCell if a cell is under the mousepointer. The default implementation checks if the cell has a getTooltip function and calls it if it exists. Hence, in order to provide custom tooltips, the cell must provide a getTooltip function, or one of the two above functions must be overridden.

Typically, for custom cell tooltips, the latter function is overridden as follows:

graph.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

When using a config file, the function is overridden in the mxGraph section using the following entry:

<add as="getTooltipForCell"><![CDATA[
  function(cell)
  {
    var label = this.convertValueToString(cell);
    return 'Tooltip for '+label;
  }
]]></add>

”this” refers to the graph in the implementation, so for example to check if a cell is an edge, you use this.getModel().isEdge(cell)

For replacing the default implementation of getTooltipForCell (rather than replacing the function on a specific instance), the following code should be used after loading the JavaScript files, but before creating a new mxGraph instance using mxGraph:

mxGraph.prototype.getTooltipForCell = function(cell)
{
  var label = this.convertValueToString(cell);
  return 'Tooltip for '+label;
}

Shapes & Styles

The implementation of new shapes is demonstrated in the examples. We’ll assume that we have implemented a custom shape with the name BoxShape which we want to use for drawing vertices. To use this shape, it must first be registered in the cell renderer as follows:

mxCellRenderer.registerShape('box', BoxShape);

The code registers the BoxShape constructor under the name box in the cell renderer of the graph. The shape can now be referenced using the shape-key in a style definition. (The cell renderer contains a set of additional shapes, namely one for each constant with a SHAPE-prefix in mxConstants.)

Styles are a collection of key, value pairs and a stylesheet is a collection of named styles. The names are referenced by the cellstyle, which is stored in mxCell.style with the following format: [stylename;|key=value;]. The string is resolved to a collection of key, value pairs, where the keys are overridden with the values in the string.

When introducing a new shape, the name under which the shape is registered must be used in the stylesheet. There are three ways of doing this:

By changing the default style, so that all vertices will use the new shape
By defining a new style, so that only vertices with the respective cellstyle will use the new shape
By using shape=box in the cellstyle’s optional list of key, value pairs to be overridden

In the first case, the code to fetch and modify the default style for vertices is as follows:

var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';

The code takes the default vertex style, which is used for all vertices that do not have a specific cellstyle, and modifies the value for the shape-key in-place to use the new BoxShape for drawing vertices. This is done by assigning the box value in the second line, which refers to the name of the BoxShape in the cell renderer.

In the second case, a collection of key, value pairs is created and then added to the stylesheet under a new name. In order to distinguish the shapename and the stylename we’ll use boxstyle for the stylename:

var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'box';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
graph.getStylesheet().putCellStyle('boxstyle', style);

The code adds a new style with the name boxstyle to the stylesheet. To use this style with a cell, it must be referenced from the cellstyle as follows:

var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20,
             'boxstyle');

To summarize, each new shape must be registered in the mxCellRenderer with a unique name. That name is then used as the value of the shape-key in a default or custom style. If there are multiple custom shapes, then there should be a separate style for each shape.

Inheriting Styles

For fill-, stroke-, gradient- and indicatorColors special keywords can be used. The inherit keyword for one of these colors will inherit the color for the same key from the parent cell. The swimlane keyword does the same, but inherits from the nearest swimlane in the ancestor hierarchy. Finally, the indicated keyword will use the color of the indicator as the color for the given key.

Scrollbars

The <containers> overflow CSS property defines if scrollbars are used to display the graph. For values of ‘auto’ or ‘scroll’, the scrollbars will be shown. Note that the resizeContainer flag is normally not used together with scrollbars, as it will resize the container to match the size of the graph after each change.

Multiplicities and Validation

To control the possible connections in mxGraph, getEdgeValidationError is used. The default implementation of the function uses multiplicities, which is an array of mxMultiplicity. Using this class allows to establish simple multiplicities, which are enforced by the graph.

The mxMultiplicity uses <mxCell.is> to determine for which terminals it applies. The default implementation of <mxCell.is> works with DOM nodes (XML nodes) and checks if the given type parameter matches the nodeName of the node (case insensitive). Optionally, an attributename and value can be specified which are also checked.

getEdgeValidationError is called whenever the connectivity of an edge changes. It returns an empty string or an error message if the edge is invalid or null if the edge is valid. If the returned string is not empty then it is displayed as an error message.

mxMultiplicity allows to specify the multiplicity between a terminal and its possible neighbors. For example, if any rectangle may only be connected to, say, a maximum of two circles you can add the following rule to multiplicities:

graph.multiplicities.push(new mxMultiplicity(
  true, 'rectangle', null, null, 0, 2, ['circle'],
  'Only 2 targets allowed',
  'Only shape targets allowed'));

This will display the first error message whenever a rectangle is connected to more than two circles and the second error message if a rectangle is connected to anything but a circle.

For certain multiplicities, such as a minimum of 1 connection, which cannot be enforced at cell creation time (unless the cell is created together with the connection), mxGraph offers validate which checks all multiplicities for all cells and displays the respective error messages in an overlay icon on the cells.

If a cell is collapsed and contains validation errors, a respective warning icon is attached to the collapsed cell.

Auto-Layout

For automatic layout, the <getLayout> hook is provided in mxLayoutManager. It can be overridden to return a layout algorithm for the children of a given cell.

Unconnected edges

The default values for all switches are designed to meet the requirements of general diagram drawing applications. A very typical set of settings to avoid edges that are not connected is the following:

graph.setAllowDanglingEdges(false);
graph.setDisconnectOnMove(false);

Setting the cloneInvalidEdges switch to true is optional. This switch controls if edges are inserted after a copy, paste or clone-drag if they are invalid. For example, edges are invalid if copied or control-dragged without having selected the corresponding terminals and allowDanglingEdges is false, in which case the edges will not be cloned if the switch is false.

Output

To produce an XML representation for a diagram, the following code can be used.

var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(graph.getModel());

This will produce an XML node than can be handled using the DOM API or turned into a string representation using the following code:

var xml = mxUtils.getXml(node);

To obtain a formatted string, mxUtils.getPrettyXml can be used instead.

This string can now be stored in a local persistent storage (for example using Google Gears) or it can be passed to a backend using mxUtils.post as follows. The url variable is the URL of the Java servlet, PHP page or HTTP handler, depending on the server.

var xmlString = encodeURIComponent(mxUtils.getXml(node));
mxUtils.post(url, 'xml='+xmlString, function(req)
{
  // Process server response using req of type mxXmlRequest
});

Input

To load an XML representation of a diagram into an existing graph object mxUtils.load can be used as follows. The url variable is the URL of the Java servlet, PHP page or HTTP handler that produces the XML string.

var xmlDoc = mxUtils.load(url).getXml();
var node = xmlDoc.documentElement;
var dec = new mxCodec(node.ownerDocument);
dec.decode(node, graph.getModel());

For creating a page that loads the client and a diagram using a single request please refer to the deployment examples in the backends.

Functional dependencies

(see images/callgraph.png)

Resources

resources/graph

Language resources for mxGraph

Summary

Events
mxEvent.ROOT	Fires if the root in the model has changed.
mxEvent.ALIGN_CELLS	Fires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGE	Fires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLS	Fires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDERED	Fires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLS	Fires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLS	Fires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENT	Fires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLS	Fires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDED	Fires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLS	Fires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVED	Fires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGE	Fires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLS	Fires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLS	Fires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDED	Fires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZE	Fires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLS	Fires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZED	Fires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLS	Fires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVED	Fires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELL	Fires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTED	Fires between begin- and endUpdate in cellConnected.
mxEvent.REFRESH	Fires after refresh was executed.
mxEvent.CLICK	Fires in click after a click event.
mxEvent.DOUBLE_CLICK	Fires in dblClick after a double click.
mxEvent.GESTURE	Fires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLD	Fires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENT	Fires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZE	Fires after sizeDidChange was executed.
mxEvent.START_EDITING	Fires before the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STARTED	Fires after the in-place editor starts in startEditingAtCell.
mxEvent.EDITING_STOPPED	Fires after the in-place editor stops in stopEditing.
mxEvent.LABEL_CHANGED	Fires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAY	Fires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAY	Fires after an overlay is removed in removeCellOverlay and removeCellOverlays.
mxGraph	Constructs a new mxGraph in the specified container.
Variables
mouseListeners	Holds the mouse event listeners.
isMouseDown	Holds the state of the mouse button.
model	Holds the mxGraphModel that contains the cells to be displayed.
view	Holds the mxGraphView that caches the mxCellStates for the cells.
stylesheet	Holds the mxStylesheet that defines the appearance of the cells.
selectionModel	Holds the mxGraphSelectionModel that models the current selection.
cellEditor	Holds the mxCellEditor that is used as the in-place editing.
cellRenderer	Holds the mxCellRenderer for rendering the cells in the graph.
multiplicities	An array of mxMultiplicities describing the allowed connections in a graph.
renderHint	RenderHint as it was passed to the constructor.
dialect	Dialect to be used for drawing the graph.
gridSize	Specifies the grid size.
gridEnabled	Specifies if the grid is enabled.
portsEnabled	Specifies if ports are enabled.
nativeDoubleClickEnabled	Specifies if native double click events should be detected.
doubleTapEnabled	Specifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeout	Specifies the timeout for double taps and non-native double clicks.
doubleTapTolerance	Specifies the tolerance for double taps and double clicks in quirks mode.
lastTouchX	Holds the x-coordinate of the last touch event for double tap detection.
lastTouchX	Holds the y-coordinate of the last touch event for double tap detection.
lastTouchTime	Holds the time of the last touch event for double click detection.
tapAndHoldEnabled	Specifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelay	Specifies the time for a tap and hold.
tapAndHoldInProgress	True if the timer for tap and hold events is running.
tapAndHoldValid	True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchX	Holds the x-coordinate of the intial touch event for tap and hold.
initialTouchY	Holds the y-coordinate of the intial touch event for tap and hold.
tolerance	Tolerance for a move to be handled as a single click.
defaultOverlap	Value returned by getOverlap if isAllowOverlapParent returns true for the given cell.
defaultParent	Specifies the default parent to be used to insert new cells.
alternateEdgeStyle	Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked.
backgroundImage	Specifies the mxImage to be returned by getBackgroundImage.
pageVisible	Specifies if the background page should be visible.
pageBreaksVisible	Specifies if a dashed line should be drawn between multiple pages.
pageBreakColor	Specifies the color for page breaks.
pageBreakDashed	Specifies the page breaks should be dashed.
minPageBreakDist	Specifies the minimum distance for page breaks to be visible.
preferPageSize	Specifies if the graph size should be rounded to the next page number in sizeDidChange.
pageFormat	Specifies the page format for the background page.
pageScale	Specifies the scale of the background page.
enabled	Specifies the return value for isEnabled.
escapeEnabled	Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
invokesStopCellEditing	If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
enterStopsCellEditing	If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
useScrollbarsForPanning	Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available.
exportEnabled	Specifies the return value for canExportCell.
importEnabled	Specifies the return value for canImportCell.
cellsLocked	Specifies the return value for isCellLocked.
cellsCloneable	Specifies the return value for isCellCloneable.
foldingEnabled	Specifies if folding (collapse and expand via an image icon in the graph should be enabled).
cellsEditable	Specifies the return value for isCellEditable.
cellsDeletable	Specifies the return value for isCellDeletable.
cellsMovable	Specifies the return value for isCellMovable.
edgeLabelsMovable	Specifies the return value for edges in isLabelMovable.
vertexLabelsMovable	Specifies the return value for vertices in isLabelMovable.
dropEnabled	Specifies the return value for isDropEnabled.
splitEnabled	Specifies if dropping onto edges should be enabled.
cellsResizable	Specifies the return value for isCellResizable.
cellsBendable	Specifies the return value for isCellsBendable.
cellsSelectable	Specifies the return value for isCellSelectable.
cellsDisconnectable	Specifies the return value for <isCellDisconntable>.
autoSizeCells	Specifies if the graph should automatically update the cell size after an edit.
autoSizeCellsOnAdd	Specifies if autoSize style should be applied when cells are added.
autoScroll	Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging.
ignoreScrollbars	Specifies if the graph should automatically scroll regardless of the scrollbars.
translateToScrollPosition	Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received.
timerAutoScroll	Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars.
allowAutoPanning	Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible.
autoExtend	Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging.
maximumGraphBounds	mxRectangle that specifies the area in which all cells in the diagram should be placed.
minimumGraphSize	mxRectangle that specifies the minimum size of the graph.
minimumContainerSize	mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSize	mxRectangle that specifies the maximum size of the container if resizeContainer is true.
resizeContainer	Specifies if the container should be resized to the graph size when the graph size has changed.
border	Border to be added to the bottom and right side when the container is being resized after the graph has been changed.
keepEdgesInForeground	Specifies if edges should appear in the foreground regardless of their order in the model.
keepEdgesInBackground	Specifies if edges should appear in the background regardless of their order in the model.
allowNegativeCoordinates	Specifies if negative coordinates for vertices are allowed.
constrainChildren	Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.
constrainRelativeChildren	Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds.
extendParents	Specifies if a parent should contain the child bounds after a resize of the child.
extendParentsOnAdd	Specifies if parents should be extended according to the extendParents switch if cells are added.
extendParentsOnAdd	Specifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResize	Specifies the return value for isRecursiveResize.
collapseToPreferredSize	Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.
zoomFactor	Specifies the factor used for zoomIn and zoomOut.
keepSelectionVisibleOnZoom	Specifies if the viewport should automatically contain the selection cells after a zoom operation.
centerZoom	Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
resetViewOnRootChange	Specifies if the scale and translate should be reset if the root changes in the model.
resetEdgesOnResize	Specifies if edge control points should be reset after the resize of a connected cell.
resetEdgesOnMove	Specifies if edge control points should be reset after the move of a connected cell.
resetEdgesOnConnect	Specifies if edge control points should be reset after the the edge has been reconnected.
allowLoops	Specifies if loops (aka self-references) are allowed.
defaultLoopStyle	mxEdgeStyle to be used for loops.
multigraph	Specifies if multiple edges in the same direction between the same pair of vertices are allowed.
connectableEdges	Specifies if edges are connectable.
allowDanglingEdges	Specifies if edges with disconnected terminals are allowed in the graph.
cloneInvalidEdges	Specifies if edges that are cloned should be validated and only inserted if they are valid.
disconnectOnMove	Specifies if edges should be disconnected from their terminals when they are moved.
labelsVisible	Specifies if labels should be visible.
htmlLabels	Specifies the return value for isHtmlLabel.
swimlaneSelectionEnabled	Specifies if swimlanes should be selectable via the content if the mouse is released.
swimlaneNesting	Specifies if nesting of swimlanes is allowed.
swimlaneIndicatorColorAttribute	The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’.
imageBundles	Holds the list of image bundles.
minFitScale	Specifies the minimum scale to be applied in fit.
maxFitScale	Specifies the maximum scale to be applied in fit.
panDx	Current horizontal panning value.
panDy	Current vertical panning value.
collapsedImage	Specifies the mxImage to indicate a collapsed state.
expandedImage	Specifies the mxImage to indicate a expanded state.
warningImage	Specifies the mxImage for the image to be used to display a warning overlay.
alreadyConnectedResource	Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected.
containsValidationErrorsResource	Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors.
collapseExpandResource	Specifies the resource key for the tooltip on the collapse/expand icon.
init	Initializes the <container> and creates the respective datastructures.
createHandlers	Creates the tooltip-, panning-, connection- and graph-handler (in this order).
createTooltipHandler	Creates and returns a new mxTooltipHandler to be used in this graph.
createSelectionCellsHandler	Creates and returns a new mxTooltipHandler to be used in this graph.
createConnectionHandler	Creates and returns a new mxConnectionHandler to be used in this graph.
createGraphHandler	Creates and returns a new mxGraphHandler to be used in this graph.
createPanningHandler	Creates and returns a new mxPanningHandler to be used in this graph.
createPopupMenuHandler	Creates and returns a new mxPopupMenuHandler to be used in this graph.
createSelectionModel	Creates a new mxGraphSelectionModel to be used in this graph.
createStylesheet	Creates a new mxGraphSelectionModel to be used in this graph.
createGraphView	Creates a new mxGraphView to be used in this graph.
createCellRenderer	Creates a new mxCellRenderer to be used in this graph.
createCellEditor	Creates a new mxCellEditor to be used in this graph.
getModel	Returns the mxGraphModel that contains the cells.
getView	Returns the mxGraphView that contains the mxCellStates.
getStylesheet	Returns the mxStylesheet that defines the style.
setStylesheet	Sets the mxStylesheet that defines the style.
getSelectionModel	Returns the mxGraphSelectionModel that contains the selection.
setSelectionModel	Sets the <mxSelectionModel> that contains the selection.
getSelectionCellsForChanges	Returns the cells to be selected for the given array of changes.
graphModelChanged	Called when the graph model changes.
updateSelection	Removes selection cells that are not in the model from the selection.
processChange	Processes the given change and invalidates the respective cached data in view.
removeStateForCell	Removes all cached information for the given cell and its descendants.
Overlays
addCellOverlay	Adds an mxCellOverlay for the specified cell.
getCellOverlays	Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
removeCellOverlay	Removes and returns the given mxCellOverlay from the given cell.
removeCellOverlays	Removes all mxCellOverlays from the given cell.
clearCellOverlays	Removes all mxCellOverlays in the graph for the given cell and all its descendants.
setCellWarning	Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay.
In-place editing
startEditing	Calls startEditingAtCell using the given cell or the first selection cell.
startEditingAtCell	Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
getEditingValue	Returns the initial value for in-place editing.
stopEditing	Stops the current editing and fires a <editingStopped> event.
labelChanged	Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
cellLabelChanged	Sets the new label for a cell.
Event processing
escape	Processes an escape keystroke.
click	Processes a singleclick on an optional cell and fires a click event.
dblClick	Processes a doubleclick on an optional cell and fires a <dblclick> event.
tapAndHold	Handles the mxMouseEvent by highlighting the mxCellState.
scrollPointToVisible	Scrolls the graph to the given point, extending the graph container if specified.
createPanningManager	Creates and returns an mxPanningManager.
getBorderSizes	Returns the size of the border and padding on all four sides of the container.
getPreferredPageSize	Returns the preferred size of the background page if preferPageSize is true.
fit	Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view.
sizeDidChange	Called when the size of the graph has changed.
doResizeContainer	Resizes the container for the given graph width and height.
updatePageBreaks	Invokes from sizeDidChange to redraw the page breaks.
Cell styles
getCellStyle	Returns an array of key, value pairs representing the cell style for the given cell.
postProcessCellStyle	Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.
setCellStyle	Sets the style of the specified cells.
toggleCellStyle	Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1.
toggleCellStyles	Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1.
setCellStyles	Sets the key to value in the styles of the given cells.
toggleCellStyleFlags	Toggles the given bit for the given key in the styles of the specified cells.
setCellStyleFlags	Sets or toggles the given bit for the given key in the styles of the specified cells.
Cell alignment and orientation
alignCells	Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
flipEdge	Toggles the style of the given edge between null (or empty) and alternateEdgeStyle.
addImageBundle	Adds the specified mxImageBundle.
removeImageBundle	Removes the specified mxImageBundle.
getImageFromBundles	Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
Order
orderCells	Moves the given cells to the front or back.
cellsOrdered	Moves the given cells to the front or back.
Grouping
groupCells	Adds the cells into the given group.
getCellsForGroup	Returns the cells with the same parent as the first cell in the given array.
getBoundsForGroup	Returns the bounds to be used for the given group and children.
createGroupCell	Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
ungroupCells	Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups.
removeCellsAfterUngroup	Hook to remove the groups after ungroupCells.
removeCellsFromParent	Removes the specified cells from their parents and adds them to the default parent.
updateGroupBounds	Updates the bounds of the given groups to include all children and returns the passed-in cells.
getBoundingBox	Returns the bounding box for the given array of mxCells.
Cell cloning, insertion and removal
cloneCell	Returns the clone for the given cell.
cloneCells	Returns the clones for the given cells.
insertVertex	Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex.
createVertex	Hook method that creates the new vertex for insertVertex.
insertEdge	Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
createEdge	Hook method that creates the new edge for insertEdge.
addEdge	Adds the edge to the parent and connects it to the given source and target terminals.
addCell	Adds the cell to the parent and connects it to the given source and target terminals.
addCells	Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal.
cellsAdded	Adds the specified cells to the given parent.
autoSizeCell	Resizes the specified cell to just fit around the its label and/or children
removeCells	Removes the given cells from the graph including all connected edges if includeEdges is true.
cellsRemoved	Removes the given cells from the model.
splitEdge	Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell.
Cell visibility
toggleCells	Sets the visible state of the specified cells and all connected edges if includeEdges is true.
cellsToggled	Sets the visible state of the specified cells.
Folding
foldCells	Sets the collapsed state of the specified cells and all descendants if recurse is true.
cellsFolded	Sets the collapsed state of the specified cells.
swapBounds	Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
updateAlternateBounds	Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed.
addAllEdges	Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.
getAllEdges	Returns all edges connected to the given cells or its descendants.
Cell sizing
updateCellSize	Updates the size of the given cell in the model using cellSizeUpdated.
cellSizeUpdated	Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
getPreferredSizeForCell	Returns the preferred width and height of the given mxCell as an mxRectangle.
resizeCell	Sets the bounds of the given cell using resizeCells.
resizeCells	Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress.
cellsResized	Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event.
cellResized	Resizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCells	Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCells	Constrains the children of the given cell using constrainChild.
scaleCell	Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
extendParent	Resizes the parents recursively so that they contain the complete area of the resized child cell.
Cell moving
importCells	Clones and inserts the given cells into the graph using the move method and returns the inserted cells.
moveCells	Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell.
cellsMoved	Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true.
translateCell	Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
getCellContainmentArea	Returns the mxRectangle inside which a cell is to be kept.
getMaximumGraphBounds	Returns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChild	Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild.
resetEdges	Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
resetEdge	Resets the control points of the given edge.
Cell connecting and connection constraints
getOutlineConstraint	Returns the constraint used to connect to the outline of the given state.
getAllConnectionConstraints	Returns an array of all mxConnectionConstraints for the given terminal.
getConnectionConstraint	Returns an mxConnectionConstraint that describes the given connection point.
setConnectionConstraint	Sets the mxConnectionConstraint that describes the given connection point.
getConnectionPoint	Returns the nearest point in the list of absolute points or the center of the opposite terminal.
connectCell	Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress.
cellConnected	Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true.
disconnectGraph	Disconnects the given edges from the terminals which are not in the given array.
Drilldown
getCurrentRoot	Returns the current root of the displayed cell hierarchy.
getTranslateForRoot	Returns the translation to be used if the given cell is the root cell as an mxPoint.
isPort	Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT.
getTerminalForPort	Returns the terminal to be used for a given port.
getChildOffsetForCell	Returns the offset to be used for the cells inside the given cell.
enterGroup	Uses the given cell as the root of the displayed cell hierarchy.
exitGroup	Changes the current root to the next valid root in the displayed cell hierarchy.
home	Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
isValidRoot	Returns true if the given cell is a valid root for the cell display hierarchy.
Graph display
getGraphBounds	Returns the bounds of the visible graph.
getCellBounds	Returns the scaled, translated bounds for the given cell.
getBoundingBoxFromGeometry	Returns the bounding box for the geometries of the vertices in the given array of cells.
refresh	Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph.
snap	Snaps the given numeric value to the grid if gridEnabled is true.
panGraph	Shifts the graph display by the given amount.
zoomIn	Zooms into the graph by zoomFactor.
zoomOut	Zooms out of the graph by zoomFactor.
zoomActual	Resets the zoom and panning in the view.
zoomTo	Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
center	Centers the graph in the container.
zoom	Zooms the graph using the given factor.
zoomToRect	Zooms the graph to the specified rectangle.
scrollCellToVisible	Pans the graph so that it shows the given cell.
scrollRectToVisible	Pans the graph so that it shows the given rectangle.
getCellGeometry	Returns the mxGeometry for the given cell.
isCellVisible	Returns true if the given cell is visible in this graph.
isCellCollapsed	Returns true if the given cell is collapsed in this graph.
isCellConnectable	Returns true if the given cell is connectable in this graph.
isOrthogonal	Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
isLoop	Returns true if the given cell state is a loop.
isCloneEvent	Returns true if the given event is a clone event.
isTransparentClickEvent	Hook for implementing click-through behaviour on selected cells.
isToggleEvent	Returns true if the given event is a toggle event.
isGridEnabledEvent	Returns true if the given mouse event should be aligned to the grid.
isConstrainedEvent	Returns true if the given mouse event should be aligned to the grid.
isIgnoreTerminalEvent	Returns true if the given mouse event should not allow any connections to be made.
Validation
validationAlert	Displays the given validation error in a dialog.
isEdgeValid	Checks if the return value of getEdgeValidationError for the given arguments is null.
getEdgeValidationError	Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
validateEdge	Hook method for subclassers to return an error message for the given edge and terminals.
validateGraph	Validates the graph by validating each descendant of the given cell or the root of the model.
getCellValidationError	Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
validateCell	Hook method for subclassers to return an error message for the given cell and validation context.
Graph appearance
getBackgroundImage	Returns the backgroundImage as an mxImage.
setBackgroundImage	Sets the new backgroundImage.
getFoldingImage	Returns the mxImage used to display the collapsed state of the specified cell state.
convertValueToString	Returns the textual representation for the given cell.
getLabel	Returns a string or DOM node that represents the label for the given cell.
isHtmlLabel	Returns true if the label must be rendered as HTML markup.
isHtmlLabels	Returns htmlLabels.
setHtmlLabels	Sets htmlLabels.
isWrapping	This enables wrapping for HTML labels.
isLabelClipped	Returns true if the overflow portion of labels should be hidden.
getTooltip	Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair.
getTooltipForCell	Returns the string or DOM node to be used as the tooltip for the given cell.
getLinkForCell	Returns the string to be used as the link for the given cell.
getCursorForMouseEvent	Returns the cursor value to be used for the CSS of the shape for the given event.
getCursorForCell	Returns the cursor value to be used for the CSS of the shape for the given cell.
getStartSize	Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style.
getImage	Returns the image URL for the given cell state.
getVerticalAlign	Returns the vertical alignment for the given cell state.
getIndicatorColor	Returns the indicator color for the given cell state.
getIndicatorGradientColor	Returns the indicator gradient color for the given cell state.
getIndicatorShape	Returns the indicator shape for the given cell state.
getIndicatorImage	Returns the indicator image for the given cell state.
getBorder	Returns the value of border.
setBorder	Sets the value of border.
isSwimlane	Returns true if the given cell is a swimlane in the graph.
Graph behaviour
isResizeContainer	Returns resizeContainer.
setResizeContainer	Sets resizeContainer.
isEnabled	Returns true if the graph is enabled.
setEnabled	Specifies if the graph should allow any interactions.
isEscapeEnabled	Returns escapeEnabled.
setEscapeEnabled	Sets escapeEnabled.
isInvokesStopCellEditing	Returns invokesStopCellEditing.
setInvokesStopCellEditing	Sets invokesStopCellEditing.
isEnterStopsCellEditing	Returns enterStopsCellEditing.
setEnterStopsCellEditing	Sets enterStopsCellEditing.
isCellLocked	Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
isCellsLocked	Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected.
setCellsLocked	Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
getCloneableCells	Returns the cells which may be exported in the given array of cells.
isCellCloneable	Returns true if the given cell is cloneable.
isCellsCloneable	Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneable	Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved.
getExportableCells	Returns the cells which may be exported in the given array of cells.
canExportCell	Returns true if the given cell may be exported to the clipboard.
getImportableCells	Returns the cells which may be imported in the given array of cells.
canImportCell	Returns true if the given cell may be imported from the clipboard.
isCellSelectable	Returns true if the given cell is selectable.
isCellsSelectable	Returns cellsSelectable.
setCellsSelectable	Sets cellsSelectable.
getDeletableCells	Returns the cells which may be exported in the given array of cells.
isCellDeletable	Returns true if the given cell is moveable.
isCellsDeletable	Returns cellsDeletable.
setCellsDeletable	Sets cellsDeletable.
isLabelMovable	Returns true if the given edges’s label is moveable.
isCellRotatable	Returns true if the given cell is rotatable.
getMovableCells	Returns the cells which are movable in the given array of cells.
isCellMovable	Returns true if the given cell is moveable.
isCellsMovable	Returns cellsMovable.
setCellsMovable	Specifies if the graph should allow moving of cells.
isGridEnabled	Returns gridEnabled as a boolean.
setGridEnabled	Specifies if the grid should be enabled.
isPortsEnabled	Returns portsEnabled as a boolean.
setPortsEnabled	Specifies if the ports should be enabled.
getGridSize	Returns gridSize.
setGridSize	Sets gridSize.
getTolerance	Returns tolerance.
setTolerance	Sets tolerance.
isVertexLabelsMovable	Returns vertexLabelsMovable.
setVertexLabelsMovable	Sets vertexLabelsMovable.
isEdgeLabelsMovable	Returns edgeLabelsMovable.
isEdgeLabelsMovable	Sets edgeLabelsMovable.
isSwimlaneNesting	Returns swimlaneNesting as a boolean.
setSwimlaneNesting	Specifies if swimlanes can be nested by drag and drop.
isSwimlaneSelectionEnabled	Returns swimlaneSelectionEnabled as a boolean.
setSwimlaneSelectionEnabled	Specifies if swimlanes should be selected if the mouse is released over their content area.
isMultigraph	Returns multigraph as a boolean.
setMultigraph	Specifies if the graph should allow multiple connections between the same pair of vertices.
isAllowLoops	Returns allowLoops as a boolean.
setAllowDanglingEdges	Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
isAllowDanglingEdges	Returns allowDanglingEdges as a boolean.
setConnectableEdges	Specifies if edges should be connectable.
isConnectableEdges	Returns connectableEdges as a boolean.
setCloneInvalidEdges	Specifies if edges should be inserted when cloned but not valid wrt.
isCloneInvalidEdges	Returns cloneInvalidEdges as a boolean.
setAllowLoops	Specifies if loops are allowed.
isDisconnectOnMove	Returns disconnectOnMove as a boolean.
setDisconnectOnMove	Specifies if edges should be disconnected when moved.
isDropEnabled	Returns dropEnabled as a boolean.
setDropEnabled	Specifies if the graph should allow dropping of cells onto or into other cells.
isSplitEnabled	Returns splitEnabled as a boolean.
setSplitEnabled	Specifies if the graph should allow dropping of cells onto or into other cells.
isCellResizable	Returns true if the given cell is resizable.
isCellsResizable	Returns cellsResizable.
setCellsResizable	Specifies if the graph should allow resizing of cells.
isTerminalPointMovable	Returns true if the given terminal point is movable.
isCellBendable	Returns true if the given cell is bendable.
isCellsBendable	Returns <cellsBenadable>.
setCellsBendable	Specifies if the graph should allow bending of edges.
isCellEditable	Returns true if the given cell is editable.
isCellsEditable	Returns cellsEditable.
setCellsEditable	Specifies if the graph should allow in-place editing for cell labels.
isCellDisconnectable	Returns true if the given cell is disconnectable from the source or target terminal.
isCellsDisconnectable	Returns cellsDisconnectable.
setCellsDisconnectable	Sets cellsDisconnectable.
isValidSource	Returns true if the given cell is a valid source for new connections.
isValidTarget	Returns isValidSource for the given cell.
isValidConnection	Returns true if the given target cell is a valid target for source.
setConnectable	Specifies if the graph should allow new connections.
isConnectable	Returns true if the <connectionHandler> is enabled.
setTooltips	Specifies if tooltips should be enabled.
setPanning	Specifies if panning should be enabled.
isEditing	Returns true if the given cell is currently being edited.
isAutoSizeCell	Returns true if the size of the given cell should automatically be updated after a change of the label.
isAutoSizeCells	Returns autoSizeCells.
setAutoSizeCells	Specifies if cell sizes should be automatically updated after a label change.
isExtendParent	Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent.
isExtendParents	Returns extendParents.
setExtendParents	Sets extendParents.
isExtendParentsOnAdd	Returns extendParentsOnAdd.
setExtendParentsOnAdd	Sets extendParentsOnAdd.
isExtendParentsOnMove	Returns <extendParentsOnMove>.
setExtendParentsOnMove	Sets <extendParentsOnMove>.
isRecursiveResize	Returns recursiveResize.
setRecursiveResize	Sets recursiveResize.
isConstrainChild	Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent.
isConstrainChildren	Returns constrainChildren.
setConstrainChildren	Sets constrainChildren.
isConstrainRelativeChildren	Returns constrainRelativeChildren.
setConstrainRelativeChildren	Sets constrainRelativeChildren.
isConstrainChildren	Returns allowNegativeCoordinates.
setConstrainChildren	Sets allowNegativeCoordinates.
getOverlap	Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent.
isAllowOverlapParent	Returns true if the given cell is allowed to be placed outside of the parents area.
getFoldableCells	Returns the cells which are movable in the given array of cells.
isCellFoldable	Returns true if the given cell is foldable.
isValidDropTarget	Returns true if the given cell is a valid drop target for the specified cells.
isSplitTarget	Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
getDropTarget	Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells.
Cell retrieval
getDefaultParent	Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null.
setDefaultParent	Sets the defaultParent to the given cell.
getSwimlane	Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
getSwimlaneAt	Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
getCellAt	Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent.
intersects	Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
hitsSwimlaneContent	Returns true if the given coordinate pair is inside the content are of the given swimlane.
getChildVertices	Returns the visible child vertices of the given parent.
getChildEdges	Returns the visible child edges of the given parent.
getChildCells	Returns the visible child vertices or edges in the given parent.
getConnections	Returns all visible edges connected to the given cell without loops.
getIncomingEdges	Returns the visible incoming edges for the given cell.
getOutgoingEdges	Returns the visible outgoing edges for the given cell.
getEdges	Returns the incoming and/or outgoing edges for the given cell.
isValidAncestor	Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
getOpposites	Returns all distinct visible opposite cells for the specified terminal on the given edges.
getEdgesBetween	Returns the edges between the given source and target.
getPointForEvent	Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
getCells	Returns the child vertices and edges of the given parent that are contained in the given rectangle.
getCellsBeyond	Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
findTreeRoots	Returns all children in the given parent which do not have incoming edges.
traverse	Traverses the (directed) graph invoking the given function for each visited vertex and edge.
Selection
isCellSelected	Returns true if the given cell is selected.
isSelectionEmpty	Returns true if the selection is empty.
clearSelection	Clears the selection using mxGraphSelectionModel.clear.
getSelectionCount	Returns the number of selected cells.
getSelectionCell	Returns the first cell from the array of selected mxCells.
getSelectionCells	Returns the array of selected mxCells.
setSelectionCell	Sets the selection cell.
setSelectionCells	Sets the selection cell.
addSelectionCell	Adds the given cell to the selection.
addSelectionCells	Adds the given cells to the selection.
removeSelectionCell	Removes the given cell from the selection.
removeSelectionCells	Removes the given cells from the selection.
selectRegion	Selects and returns the cells inside the given rectangle for the specified event.
selectNextCell	Selects the next cell.
selectPreviousCell	Selects the previous cell.
selectParentCell	Selects the parent cell.
selectChildCell	Selects the first child cell.
selectCell	Selects the next, parent, first child or previous cell, if all arguments are false.
selectAll	Selects all children of the given parent cell or the children of the default parent if no parent is specified.
selectVertices	Select all vertices inside the given parent or the default parent.
selectVertices	Select all vertices inside the given parent or the default parent.
selectCells	Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified.
selectCellForEvent	Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
selectCellsForEvent	Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Selection state
createHandler	Creates a new handler for the given cell state.
createVertexHandler	Hooks to create a new mxVertexHandler for the given mxCellState.
createEdgeHandler	Hooks to create a new mxEdgeHandler for the given mxCellState.
createEdgeSegmentHandler	Hooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.
createElbowEdgeHandler	Hooks to create a new mxElbowEdgeHandler for the given mxCellState.
Graph events
addMouseListener	Adds a listener to the graph event dispatch loop.
removeMouseListener	Removes the specified graph listener.
updateMouseEvent	Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
getStateForEvent	Returns the state for the given touch event.
isEventIgnored	Returns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnored	Hook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnored	Returns true if the event should be ignored in fireMouseEvent.
getEventState	Returns the mxCellState to be used when firing the mouse event for the given state.
fireMouseEvent	Dispatches the given event in the graph event dispatch loop.
consumeMouseEvent	Consumes the given mxMouseEvent if it’s a touchStart event.
fireGestureEvent	Dispatches a mxEvent.GESTURE event.
destroy	Destroys the graph and all its resources.

Events

mxEvent.ROOT

Fires if the root in the model has changed. This event has no properties.

mxEvent.ALIGN_CELLS

Fires between begin- and endUpdate in alignCells. The <code>cells</code> and <code>align</code> properties contain the respective arguments that were passed to alignCells.

mxEvent.FLIP_EDGE

Fires between begin- and endUpdate in flipEdge. The <code>edge</code> property contains the edge passed to flipEdge.

mxEvent.ORDER_CELLS

Fires between begin- and endUpdate in orderCells. The <code>cells</code> and <code>back</code> properties contain the respective arguments that were passed to orderCells.

mxEvent.CELLS_ORDERED

Fires between begin- and endUpdate in cellsOrdered. The <code>cells</code> and <code>back</code> arguments contain the respective arguments that were passed to cellsOrdered.

mxEvent.GROUP_CELLS

Fires between begin- and endUpdate in groupCells. The <code>group</code>, <code>cells</code> and <code>border</code> arguments contain the respective arguments that were passed to groupCells.

mxEvent.UNGROUP_CELLS

Fires between begin- and endUpdate in ungroupCells. The <code>cells</code> property contains the array of cells that was passed to ungroupCells.

mxEvent.REMOVE_CELLS_FROM_PARENT

Fires between begin- and endUpdate in removeCellsFromParent. The <code>cells</code> property contains the array of cells that was passed to removeCellsFromParent.

mxEvent.ADD_CELLS

Fires between begin- and endUpdate in addCells. The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code> and <code>target</code> properties contain the respective arguments that were passed to addCells.

mxEvent.CELLS_ADDED

Fires between begin- and endUpdate in cellsAdded. The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code>, <code>target</code> and <code>absolute</code> properties contain the respective arguments that were passed to cellsAdded.

mxEvent.REMOVE_CELLS

Fires between begin- and endUpdate in removeCells. The <code>cells</code> and <code>includeEdges</code> arguments contain the respective arguments that were passed to removeCells.

mxEvent.CELLS_REMOVED

Fires between begin- and endUpdate in cellsRemoved. The <code>cells</code> argument contains the array of cells that was removed.

mxEvent.SPLIT_EDGE

Fires between begin- and endUpdate in splitEdge. The <code>edge</code> property contains the edge to be splitted, the <code>cells</code>, <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain the respective arguments that were passed to splitEdge.

mxEvent.TOGGLE_CELLS

Fires between begin- and endUpdate in toggleCells. The <code>show</code>, <code>cells</code> and <code>includeEdges</code> properties contain the respective arguments that were passed to toggleCells.

mxEvent.FOLD_CELLS

Fires between begin- and endUpdate in foldCells. The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to foldCells.

mxEvent.CELLS_FOLDED

Fires between begin- and endUpdate in cellsFolded. The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to cellsFolded.

mxEvent.UPDATE_CELL_SIZE

Fires between begin- and endUpdate in updateCellSize. The <code>cell</code> and <code>ignoreChildren</code> properties contain the respective arguments that were passed to updateCellSize.

mxEvent.RESIZE_CELLS

Fires between begin- and endUpdate in resizeCells. The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to resizeCells.

mxEvent.CELLS_RESIZED

Fires between begin- and endUpdate in cellsResized. The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to cellsResized.

mxEvent.MOVE_CELLS

Fires between begin- and endUpdate in moveCells. The <code>cells</code>, <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code> and <code>event</code> properties contain the respective arguments that were passed to moveCells.

mxEvent.CELLS_MOVED

Fires between begin- and endUpdate in cellsMoved. The <code>cells</code>, <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties contain the respective arguments that were passed to cellsMoved.

mxEvent.CONNECT_CELL

Fires between begin- and endUpdate in connectCell. The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to connectCell.

mxEvent.CELL_CONNECTED

Fires between begin- and endUpdate in cellConnected. The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to cellConnected.

mxEvent.REFRESH

Fires after refresh was executed. This event has no properties.

mxEvent.CLICK

Fires in click after a click event. The <code>event</code> property contains the original mouse event and <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.DOUBLE_CLICK

Fires in dblClick after a double click. The <code>event</code> property contains the original mouse event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.GESTURE

Fires in fireGestureEvent after a touch gesture. The <code>event</code> property contains the original gesture end event and the <code>cell</code> property contains the optional cell associated with the gesture.

mxEvent.TAP_AND_HOLD

Fires in tapAndHold if a tap and hold event was detected. The <code>event</code> property contains the initial touch event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.FIRE_MOUSE_EVENT

Fires in fireMouseEvent before the mouse listeners are invoked. The <code>eventName</code> property contains the event name and the <code>event</code> property contains the mxMouseEvent.

mxEvent.SIZE

Fires after sizeDidChange was executed. The <code>bounds</code> property contains the new graph bounds.

mxEvent.START_EDITING

Fires before the in-place editor starts in startEditingAtCell. The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STARTED

Fires after the in-place editor starts in startEditingAtCell. The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.

mxEvent.EDITING_STOPPED

Fires after the in-place editor stops in stopEditing.

mxEvent.LABEL_CHANGED

Fires between begin- and endUpdate in cellLabelChanged. The <code>cell</code> property contains the cell, the <code>value</code> property contains the new value for the cell, the <code>old</code> property contains the old value and the optional <code>event</code> property contains the mouse event that started the edit.

mxEvent.ADD_OVERLAY

Fires after an overlay is added in addCellOverlay. The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was added.

mxEvent.REMOVE_OVERLAY

Fires after an overlay is removed in removeCellOverlay and removeCellOverlays. The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was removed.

mxGraph

function mxGraph( container,
model,
renderHint,
stylesheet )

Constructs a new mxGraph in the specified container. Model is an optional mxGraphModel. If no model is provided, a new mxGraphModel instance is used as the model. The container must have a valid owner document prior to calling this function in Internet Explorer. RenderHint is a string to affect the display performance and rendering in IE, but not in SVG-based browsers. The parameter is mapped to dialect, which may be one of mxConstants.DIALECT_SVG for SVG-based browsers, mxConstants.DIALECT_STRICTHTML for fastest display mode, mxConstants.DIALECT_PREFERHTML for faster display mode, mxConstants.DIALECT_MIXEDHTML for fast and mxConstants.DIALECT_VML for exact display mode (slowest). The dialects are defined in mxConstants. The default values are DIALECT_SVG for SVG-based browsers and DIALECT_MIXED for IE.

The possible values for the renderingHint parameter are explained below

fast	The parameter is based on the fact that the display performance is highly improved in IE if the VML is not contained within a VML group element. The lack of a group element only slightly affects the display while panning, but improves the performance by almost a factor of 2, while keeping the display sufficiently accurate. This also allows to render certain shapes as HTML if the display accuracy is not affected, which is implemented by <mxShape.isMixedModeHtml>. This is the default setting and is mapped to DIALECT_MIXEDHTML.
faster	Same as fast, but more expensive shapes are avoided. This is controlled by <mxShape.preferModeHtml>. The default implementation will avoid gradients and rounded rectangles, but more significant shapes, such as rhombus, ellipse, actor and cylinder will be rendered accurately. This setting is mapped to DIALECT_PREFERHTML.
fastest	Almost anything will be rendered in Html. This allows for rectangles, labels and images. This setting is mapped to DIALECT_STRICTHTML.
exact	If accurate panning is required and if the diagram is small (up to 100 cells), then this value should be used. In this mode, a group is created that contains the VML. This allows for accurate panning and is mapped to DIALECT_VML.

Example

To create a graph inside a DOM node with an id of graph

var container = document.getElementById('graph');
var graph = new mxGraph(container);

Parameters

container	Optional DOM node that acts as a container for the graph. If this is null then the container can be initialized later using init.
model	Optional mxGraphModel that constitutes the graph data.
renderHint	Optional string that specifies the display accuracy and performance. Default is mxConstants.DIALECT_MIXEDHTML (for IE).
stylesheet	Optional mxStylesheet to be used in the graph.

Variables

mouseListeners

mxGraph.prototype.mouseListeners

Holds the mouse event listeners. See fireMouseEvent.

isMouseDown

mxGraph.prototype.isMouseDown

Holds the state of the mouse button.

model

mxGraph.prototype.model

Holds the mxGraphModel that contains the cells to be displayed.

view

mxGraph.prototype.view

Holds the mxGraphView that caches the mxCellStates for the cells.

stylesheet

mxGraph.prototype.stylesheet

Holds the mxStylesheet that defines the appearance of the cells.

Example

Use the following code to read a stylesheet into an existing graph.

var req = mxUtils.load('stylesheet.xml');
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.stylesheet);

selectionModel

mxGraph.prototype.selectionModel

Holds the mxGraphSelectionModel that models the current selection.

cellEditor

mxGraph.prototype.cellEditor

Holds the mxCellEditor that is used as the in-place editing.

cellRenderer

mxGraph.prototype.cellRenderer

Holds the mxCellRenderer for rendering the cells in the graph.

multiplicities

mxGraph.prototype.multiplicities

An array of mxMultiplicities describing the allowed connections in a graph.

renderHint

mxGraph.prototype.renderHint

RenderHint as it was passed to the constructor.

dialect

mxGraph.prototype.dialect

Dialect to be used for drawing the graph. Possible values are all constants in mxConstants with a DIALECT-prefix.

gridSize

mxGraph.prototype.gridSize

Specifies the grid size. Default is 10.

gridEnabled

mxGraph.prototype.gridEnabled

Specifies if the grid is enabled. This is used in snap. Default is true.

portsEnabled

mxGraph.prototype.portsEnabled

Specifies if ports are enabled. This is used in cellConnected to update the respective style. Default is true.

nativeDoubleClickEnabled

Specifies if native double click events should be detected. Default is true.

doubleTapEnabled

mxGraph.prototype.doubleTapEnabled

Specifies if double taps on touch-based devices should be handled as a double click. Default is true.

doubleTapTimeout

mxGraph.prototype.doubleTapTimeout

Specifies the timeout for double taps and non-native double clicks. Default is 500 ms.

doubleTapTolerance

mxGraph.prototype.doubleTapTolerance

Specifies the tolerance for double taps and double clicks in quirks mode. Default is 25 pixels.

lastTouchX

Holds the x-coordinate of the last touch event for double tap detection.

lastTouchX

Holds the y-coordinate of the last touch event for double tap detection.

lastTouchTime

mxGraph.prototype.lastTouchTime

Holds the time of the last touch event for double click detection.

tapAndHoldEnabled

mxGraph.prototype.tapAndHoldEnabled

Specifies if tap and hold should be used for starting connections on touch-based devices. Default is true.

tapAndHoldDelay

mxGraph.prototype.tapAndHoldDelay

Specifies the time for a tap and hold. Default is 500 ms.

tapAndHoldInProgress

mxGraph.prototype.tapAndHoldInProgress

True if the timer for tap and hold events is running.

tapAndHoldValid

mxGraph.prototype.tapAndHoldValid

True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.

initialTouchX

mxGraph.prototype.initialTouchX

Holds the x-coordinate of the intial touch event for tap and hold.

initialTouchY

mxGraph.prototype.initialTouchY

Holds the y-coordinate of the intial touch event for tap and hold.

tolerance

mxGraph.prototype.tolerance

Tolerance for a move to be handled as a single click. Default is 4 pixels.

defaultOverlap

mxGraph.prototype.defaultOverlap

Value returned by getOverlap if isAllowOverlapParent returns true for the given cell. getOverlap is used in constrainChild if isConstrainChild returns true. The value specifies the portion of the child which is allowed to overlap the parent.

defaultParent

mxGraph.prototype.defaultParent

Specifies the default parent to be used to insert new cells. This is used in getDefaultParent. Default is null.

alternateEdgeStyle

mxGraph.prototype.alternateEdgeStyle

Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked. Default is null.

backgroundImage

mxGraph.prototype.backgroundImage

Specifies the mxImage to be returned by getBackgroundImage. Default is null.

Example

var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768);
graph.setBackgroundImage(img);
graph.view.validate();

pageVisible

mxGraph.prototype.pageVisible

Specifies if the background page should be visible. Default is false. Not yet implemented.

pageBreaksVisible

mxGraph.prototype.pageBreaksVisible

Specifies if a dashed line should be drawn between multiple pages. Default is false. If you change this value while a graph is being displayed then you should call sizeDidChange to force an update of the display.

pageBreakColor

mxGraph.prototype.pageBreakColor

Specifies the color for page breaks. Default is ‘gray’.

pageBreakDashed

mxGraph.prototype.pageBreakDashed

Specifies the page breaks should be dashed. Default is true.

minPageBreakDist

mxGraph.prototype.minPageBreakDist

Specifies the minimum distance for page breaks to be visible. Default is 20 (in pixels).

preferPageSize

mxGraph.prototype.preferPageSize

Specifies if the graph size should be rounded to the next page number in sizeDidChange. This is only used if the graph container has scrollbars. Default is false.

pageFormat

mxGraph.prototype.pageFormat

Specifies the page format for the background page. Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT. This is used as the default in mxPrintPreview and for painting the background page if pageVisible is true and the pagebreaks if pageBreaksVisible is true.

pageScale

mxGraph.prototype.pageScale

Specifies the scale of the background page. Default is 1.5. Not yet implemented.

enabled

mxGraph.prototype.enabled

Specifies the return value for isEnabled. Default is true.

escapeEnabled

mxGraph.prototype.escapeEnabled

Specifies if mxKeyHandler should invoke escape when the escape key is pressed. Default is true.

invokesStopCellEditing

mxGraph.prototype.invokesStopCellEditing

If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved. This is implemented in a focus handler in mxCellEditor. Default is true.

enterStopsCellEditing

mxGraph.prototype.enterStopsCellEditing

If true, pressing the enter key without pressing control or shift will stop editing and accept the new value. This is used in mxCellEditor to stop cell editing. Note: You can always use F2 and escape to stop editing. Default is false.

useScrollbarsForPanning

mxGraph.prototype.useScrollbarsForPanning

Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available. If scrollbars are enabled in CSS, but no scrollbars appear because the graph is smaller than the container size, then no panning occurs if this is true. Default is true.

exportEnabled

mxGraph.prototype.exportEnabled

Specifies the return value for canExportCell. Default is true.

importEnabled

mxGraph.prototype.importEnabled

Specifies the return value for canImportCell. Default is true.

cellsLocked

mxGraph.prototype.cellsLocked

Specifies the return value for isCellLocked. Default is false.

cellsCloneable

mxGraph.prototype.cellsCloneable

Specifies the return value for isCellCloneable. Default is true.

foldingEnabled

mxGraph.prototype.foldingEnabled

Specifies if folding (collapse and expand via an image icon in the graph should be enabled). Default is true.

cellsEditable

mxGraph.prototype.cellsEditable

Specifies the return value for isCellEditable. Default is true.

cellsDeletable

mxGraph.prototype.cellsDeletable

Specifies the return value for isCellDeletable. Default is true.

cellsMovable

mxGraph.prototype.cellsMovable

Specifies the return value for isCellMovable. Default is true.

edgeLabelsMovable

mxGraph.prototype.edgeLabelsMovable

Specifies the return value for edges in isLabelMovable. Default is true.

vertexLabelsMovable

mxGraph.prototype.vertexLabelsMovable

Specifies the return value for vertices in isLabelMovable. Default is false.

dropEnabled

mxGraph.prototype.dropEnabled

Specifies the return value for isDropEnabled. Default is false.

splitEnabled

mxGraph.prototype.splitEnabled

Specifies if dropping onto edges should be enabled. This is ignored if dropEnabled is false. If enabled, it will call splitEdge to carry out the drop operation. Default is true.

cellsResizable

mxGraph.prototype.cellsResizable

Specifies the return value for isCellResizable. Default is true.

cellsBendable

mxGraph.prototype.cellsBendable

Specifies the return value for isCellsBendable. Default is true.

cellsSelectable

mxGraph.prototype.cellsSelectable

Specifies the return value for isCellSelectable. Default is true.

cellsDisconnectable

mxGraph.prototype.cellsDisconnectable

Specifies the return value for <isCellDisconntable>. Default is true.

autoSizeCells

mxGraph.prototype.autoSizeCells

Specifies if the graph should automatically update the cell size after an edit. This is used in isAutoSizeCell. Default is false.

autoSizeCellsOnAdd

mxGraph.prototype.autoSizeCellsOnAdd

Specifies if autoSize style should be applied when cells are added. Default is false.

autoScroll

mxGraph.prototype.autoScroll

Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging. This is only taken into account if the container has scrollbars. Default is true.

If you need this to work without scrollbars then set ignoreScrollbars to true. Please consult the ignoreScrollbars for details. In general, with no scrollbars, the use of allowAutoPanning is recommended.

ignoreScrollbars

mxGraph.prototype.ignoreScrollbars

Specifies if the graph should automatically scroll regardless of the scrollbars. This will scroll the container using positive values for scroll positions (ie usually only rightwards and downwards). To avoid possible conflicts with panning, set translateToScrollPosition to true.

translateToScrollPosition

mxGraph.prototype.translateToScrollPosition

Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received. This can be used to avoid conflicts when using autoScroll and ignoreScrollbars with no scrollbars in the container.

timerAutoScroll

mxGraph.prototype.timerAutoScroll

Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars. This disables scrollPointToVisible and uses mxPanningManager instead. If this is true then autoExtend is disabled. It should only be used with a scroll buffer or when scollbars are visible and scrollable in all directions. Default is false.

allowAutoPanning

mxGraph.prototype.allowAutoPanning

Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible. To enable panning inside the container, near the edge, set mxPanningManager.border to a positive value. Default is false.

autoExtend

mxGraph.prototype.autoExtend

Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging. This is only taken into account if the container has scrollbars. Default is true. See autoScroll.

maximumGraphBounds

mxGraph.prototype.maximumGraphBounds

mxRectangle that specifies the area in which all cells in the diagram should be placed. Uses in getMaximumGraphBounds. Use a width or height of 0 if you only want to give a upper, left corner.

minimumGraphSize

mxGraph.prototype.minimumGraphSize

mxRectangle that specifies the minimum size of the graph. This is ignored if the graph container has no scrollbars. Default is null.

minimumContainerSize

mxGraph.prototype.minimumContainerSize

mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.

maximumContainerSize

mxGraph.prototype.maximumContainerSize

mxRectangle that specifies the maximum size of the container if resizeContainer is true.

resizeContainer

mxGraph.prototype.resizeContainer

Specifies if the container should be resized to the graph size when the graph size has changed. Default is false.

border

mxGraph.prototype.border

Border to be added to the bottom and right side when the container is being resized after the graph has been changed. Default is 0.

keepEdgesInForeground

mxGraph.prototype.keepEdgesInForeground

Specifies if edges should appear in the foreground regardless of their order in the model. If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied. Default is false.

keepEdgesInBackground

mxGraph.prototype.keepEdgesInBackground

Specifies if edges should appear in the background regardless of their order in the model. If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied. Default is false.

allowNegativeCoordinates

mxGraph.prototype.allowNegativeCoordinates

Specifies if negative coordinates for vertices are allowed. Default is true.

constrainChildren

mxGraph.prototype.constrainChildren

Specifies if a child should be constrained inside the parent bounds after a move or resize of the child. Default is true.

constrainRelativeChildren

mxGraph.prototype.constrainRelativeChildren

Specifies if child cells with relative geometries should be constrained inside the parent bounds, if constrainChildren is true, and/or the maximumGraphBounds. Default is false.

extendParents

mxGraph.prototype.extendParents

Specifies if a parent should contain the child bounds after a resize of the child. Default is true. This has precedence over constrainChildren.

extendParentsOnAdd

mxGraph.prototype.extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added. Default is true.

extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added. Default is false for backwards compatiblity.

recursiveResize

mxGraph.prototype.recursiveResize

Specifies the return value for isRecursiveResize. Default is false for backwards compatiblity.

collapseToPreferredSize

mxGraph.prototype.collapseToPreferredSize

Specifies if the cell size should be changed to the preferred size when a cell is first collapsed. Default is true.

zoomFactor

mxGraph.prototype.zoomFactor

Specifies the factor used for zoomIn and zoomOut. Default is 1.2 (120%).

keepSelectionVisibleOnZoom

mxGraph.prototype.keepSelectionVisibleOnZoom

Specifies if the viewport should automatically contain the selection cells after a zoom operation. Default is false.

centerZoom

mxGraph.prototype.centerZoom

Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left. Default is true.

resetViewOnRootChange

mxGraph.prototype.resetViewOnRootChange

Specifies if the scale and translate should be reset if the root changes in the model. Default is true.

resetEdgesOnResize

mxGraph.prototype.resetEdgesOnResize

Specifies if edge control points should be reset after the resize of a connected cell. Default is false.

resetEdgesOnMove

mxGraph.prototype.resetEdgesOnMove

Specifies if edge control points should be reset after the move of a connected cell. Default is false.

resetEdgesOnConnect

mxGraph.prototype.resetEdgesOnConnect

Specifies if edge control points should be reset after the the edge has been reconnected. Default is true.

allowLoops

mxGraph.prototype.allowLoops

Specifies if loops (aka self-references) are allowed. Default is false.

defaultLoopStyle

mxGraph.prototype.defaultLoopStyle

mxEdgeStyle to be used for loops. This is a fallback for loops if the mxConstants.STYLE_LOOP is undefined. Default is mxEdgeStyle.Loop.

multigraph

mxGraph.prototype.multigraph

Specifies if multiple edges in the same direction between the same pair of vertices are allowed. Default is true.

connectableEdges

mxGraph.prototype.connectableEdges

Specifies if edges are connectable. Default is false. This overrides the connectable field in edges.

allowDanglingEdges

mxGraph.prototype.allowDanglingEdges

Specifies if edges with disconnected terminals are allowed in the graph. Default is true.

cloneInvalidEdges

mxGraph.prototype.cloneInvalidEdges

Specifies if edges that are cloned should be validated and only inserted if they are valid. Default is true.

disconnectOnMove

mxGraph.prototype.disconnectOnMove

Specifies if edges should be disconnected from their terminals when they are moved. Default is true.

labelsVisible

mxGraph.prototype.labelsVisible

Specifies if labels should be visible. This is used in getLabel. Default is true.

htmlLabels

mxGraph.prototype.htmlLabels

Specifies the return value for isHtmlLabel. Default is false.

swimlaneSelectionEnabled

mxGraph.prototype.swimlaneSelectionEnabled

Specifies if swimlanes should be selectable via the content if the mouse is released. Default is true.

swimlaneNesting

mxGraph.prototype.swimlaneNesting

Specifies if nesting of swimlanes is allowed. Default is true.

swimlaneIndicatorColorAttribute

mxGraph.prototype.swimlaneIndicatorColorAttribute

The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’. Default is mxConstants.STYLE_FILLCOLOR.

imageBundles

mxGraph.prototype.imageBundles

Holds the list of image bundles.

minFitScale

mxGraph.prototype.minFitScale

Specifies the minimum scale to be applied in fit. Default is 0.1. Set this to null to allow any value.

maxFitScale

mxGraph.prototype.maxFitScale

Specifies the maximum scale to be applied in fit. Default is 8. Set this to null to allow any value.

panDx

mxGraph.prototype.panDx

Current horizontal panning value. Default is 0.

panDy

mxGraph.prototype.panDy

Current vertical panning value. Default is 0.

collapsedImage

mxGraph.prototype.collapsedImage

Specifies the mxImage to indicate a collapsed state. Default value is mxClient.imageBasePath + ‘/collapsed.gif’

expandedImage

mxGraph.prototype.expandedImage

Specifies the mxImage to indicate a expanded state. Default value is mxClient.imageBasePath + ‘/expanded.gif’

warningImage

mxGraph.prototype.warningImage

Specifies the mxImage for the image to be used to display a warning overlay. See setCellWarning. Default value is mxClient.imageBasePath + ‘/warning’. The extension for the image depends on the platform. It is ‘.png’ on the Mac and ‘.gif’ on all other platforms.

alreadyConnectedResource

mxGraph.prototype.alreadyConnectedResource

Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected. If the resource for this key does not exist then the value is used as the error message. Default is ‘alreadyConnected’.

containsValidationErrorsResource

mxGraph.prototype.containsValidationErrorsResource

Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors. If the resource for this key does not exist then the value is used as the warning message. Default is ‘containsValidationErrors’.

collapseExpandResource

mxGraph.prototype.collapseExpandResource

Specifies the resource key for the tooltip on the collapse/expand icon. If the resource for this key does not exist then the value is used as the tooltip. Default is ‘collapse-expand’.

init

mxGraph.prototype.init = function( container )

Initializes the <container> and creates the respective datastructures.

Parameters

container

DOM node that will contain the graph display.

createHandlers

mxGraph.prototype.createHandlers = function()

Creates the tooltip-, panning-, connection- and graph-handler (in this order). This is called in the constructor before init is called.

createTooltipHandler

mxGraph.prototype.createTooltipHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createSelectionCellsHandler

mxGraph.prototype.createSelectionCellsHandler = function()

Creates and returns a new mxTooltipHandler to be used in this graph.

createConnectionHandler

mxGraph.prototype.createConnectionHandler = function()

Creates and returns a new mxConnectionHandler to be used in this graph.

createGraphHandler

mxGraph.prototype.createGraphHandler = function()

Creates and returns a new mxGraphHandler to be used in this graph.

createPanningHandler

mxGraph.prototype.createPanningHandler = function()

Creates and returns a new mxPanningHandler to be used in this graph.

createPopupMenuHandler

mxGraph.prototype.createPopupMenuHandler = function()

Creates and returns a new mxPopupMenuHandler to be used in this graph.

createSelectionModel

mxGraph.prototype.createSelectionModel = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createStylesheet

mxGraph.prototype.createStylesheet = function()

Creates a new mxGraphSelectionModel to be used in this graph.

createGraphView

mxGraph.prototype.createGraphView = function()

Creates a new mxGraphView to be used in this graph.

createCellRenderer

mxGraph.prototype.createCellRenderer = function()

Creates a new mxCellRenderer to be used in this graph.

createCellEditor

mxGraph.prototype.createCellEditor = function()

Creates a new mxCellEditor to be used in this graph.

getModel

mxGraph.prototype.getModel = function()

Returns the mxGraphModel that contains the cells.

getView

mxGraph.prototype.getView = function()

Returns the mxGraphView that contains the mxCellStates.

getStylesheet

mxGraph.prototype.getStylesheet = function()

Returns the mxStylesheet that defines the style.

setStylesheet

mxGraph.prototype.setStylesheet = function( stylesheet )

Sets the mxStylesheet that defines the style.

getSelectionModel

mxGraph.prototype.getSelectionModel = function()

Returns the mxGraphSelectionModel that contains the selection.

setSelectionModel

mxGraph.prototype.setSelectionModel = function( selectionModel )

Sets the <mxSelectionModel> that contains the selection.

getSelectionCellsForChanges

mxGraph.prototype.getSelectionCellsForChanges = function( changes )

Returns the cells to be selected for the given array of changes.

graphModelChanged

mxGraph.prototype.graphModelChanged = function( changes )

Called when the graph model changes. Invokes processChange on each item of the given array to update the view accordingly.

Parameters

changes

Array that contains the individual changes.

updateSelection

mxGraph.prototype.updateSelection = function()

Removes selection cells that are not in the model from the selection.

processChange

mxGraph.prototype.processChange = function( change )

Processes the given change and invalidates the respective cached data in view. This fires a <root> event if the root has changed in the model.

Parameters

change

Object that represents the change on the model.

removeStateForCell

mxGraph.prototype.removeStateForCell = function( cell )

Removes all cached information for the given cell and its descendants. This is called when a cell was removed from the model.

Paramters

cell	mxCell that was removed from the model.

Overlays

addCellOverlay

mxGraph.prototype.addCellOverlay = function( cell,
overlay )

Adds an mxCellOverlay for the specified cell. This method fires an <addoverlay> event and returns the new mxCellOverlay.

Parameters

cell	mxCell to add the overlay for.
overlay	mxCellOverlay to be added for the cell.

getCellOverlays

mxGraph.prototype.getCellOverlays = function( cell )

Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.

Parameters

cell	mxCell whose overlays should be returned.

removeCellOverlay

mxGraph.prototype.removeCellOverlay = function( cell,
overlay )

Removes and returns the given mxCellOverlay from the given cell. This method fires a <removeoverlay> event. If no overlay is given, then all overlays are removed using <removeOverlays>.

Parameters

cell	mxCell whose overlay should be removed.
overlay	Optional mxCellOverlay to be removed.

removeCellOverlays

mxGraph.prototype.removeCellOverlays = function( cell )

Removes all mxCellOverlays from the given cell. This method fires a <removeoverlay> event for each mxCellOverlay and returns the array of mxCellOverlays that was removed from the cell.

Parameters

cell	mxCell whose overlays should be removed

clearCellOverlays

mxGraph.prototype.clearCellOverlays = function( cell )

Removes all mxCellOverlays in the graph for the given cell and all its descendants. If no cell is specified then all overlays are removed from the graph. This implementation uses removeCellOverlays to remove the overlays from the individual cells.

Parameters

cell	Optional mxCell that represents the root of the subtree to remove the overlays from. Default is the root in the model.

setCellWarning

mxGraph.prototype.setCellWarning = function( cell,
warning,
img,
isSelect )

Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay. The warning is displayed as a tooltip in a red font and may contain HTML markup. If the warning is null or a zero length string, then all overlays are removed from the cell.

Example

graph.setCellWarning(cell, '<b>Warning:</b>: Hello, World!');

Parameters

cell	mxCell whose warning should be set.
warning	String that represents the warning to be displayed.
img	Optional mxImage to be used for the overlay. Default is warningImage.
isSelect	Optional boolean indicating if a click on the overlay should select the corresponding cell. Default is false.

In-place editing

startEditing

mxGraph.prototype.startEditing = function( evt )

Calls startEditingAtCell using the given cell or the first selection cell.

Parameters

evt	Optional mouse event that triggered the editing.

startEditingAtCell

mxGraph.prototype.startEditingAtCell = function( cell,
evt )

Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>. After editing was started, a <editingStarted> event is fired.

Parameters

cell	mxCell to start the in-place editor for.
evt	Optional mouse event that triggered the editing.

getEditingValue

mxGraph.prototype.getEditingValue = function( cell,
evt )

Returns the initial value for in-place editing. This implementation returns convertValueToString for the given cell. If this function is overridden, then mxGraphModel.valueForCellChanged should take care of correctly storing the actual new value inside the user object.

Parameters

cell	mxCell for which the initial editing value should be returned.
evt	Optional mouse event that triggered the editor.

stopEditing

mxGraph.prototype.stopEditing = function( cancel )

Stops the current editing and fires a <editingStopped> event.

Parameters

cancel

Boolean that specifies if the current editing value should be stored.

labelChanged

mxGraph.prototype.labelChanged = function( cell,
value,
evt )

Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress. Returns the cell whose label was changed.

Parameters

cell	mxCell whose label should be changed.
value	New label to be assigned.
evt	Optional event that triggered the change.

cellLabelChanged

mxGraph.prototype.cellLabelChanged = function( cell,
value,
autoSize )

Sets the new label for a cell. If autoSize is true then cellSizeUpdated will be called.

In the following example, the function is extended to map changes to attributes in an XML node, as shown in convertValueToString. Alternatively, the handling of this can be implemented as shown in mxGraphModel.valueForCellChanged without the need to clone the user object.

var graphCellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
 // Cloned for correct undo/redo
 var elt = cell.value.cloneNode(true);
 elt.setAttribute('label', newValue);

 newValue = elt;
 graphCellLabelChanged.apply(this, arguments);
};

Parameters

cell	mxCell whose label should be changed.
value	New label to be assigned.
autoSize	Boolean that specifies if cellSizeUpdated should be called.

Event processing

escape

mxGraph.prototype.escape = function( evt )

Processes an escape keystroke.

Parameters

evt	Mouseevent that represents the keystroke.

click

mxGraph.prototype.click = function( me )

Processes a singleclick on an optional cell and fires a click event. The click event is fired initially. If the graph is enabled and the event has not been consumed, then the cell is selected using selectCellForEvent or the selection is cleared using clearSelection. The events consumed state is set to true if the corresponding mxMouseEvent has been consumed.

To handle a click event, use the following code.

graph.addListener(mxEvent.CLICK, function(sender, evt)
{
  var e = evt.getProperty('event'); // mouse event
  var cell = evt.getProperty('cell'); // cell may be null

  if (cell != null)
  {
    // Do something useful with cell and consume the event
    evt.consume();
  }
});

Parameters

me	mxMouseEvent that represents the single click.

dblClick

mxGraph.prototype.dblClick = function( evt,
cell )

Processes a doubleclick on an optional cell and fires a <dblclick> event. The event is fired initially. If the graph is enabled and the event has not been consumed, then <edit> is called with the given cell. The event is ignored if no cell was specified.

Example for overriding this method.

graph.dblClick = function(evt, cell)
{
  var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
  this.fireEvent(mxe);

  if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed())
  {
    mxUtils.alert('Hello, World!');
    mxe.consume();
  }
}

Example listener for this event.

graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt)
{
  var cell = evt.getProperty('cell');
  // do something with the cell and consume the
  // event to prevent in-place editing from start
});

Parameters

evt	Mouseevent that represents the doubleclick.
cell	Optional mxCell under the mousepointer.

tapAndHold

mxGraph.prototype.tapAndHold = function( me )

Handles the mxMouseEvent by highlighting the mxCellState.

Parameters

me	mxMouseEvent that represents the touch event.
state	Optional mxCellState that is associated with the event.

scrollPointToVisible

mxGraph.prototype.scrollPointToVisible = function( x,
y,
extend,
border )

Scrolls the graph to the given point, extending the graph container if specified.

createPanningManager

mxGraph.prototype.createPanningManager = function()

Creates and returns an mxPanningManager.

getBorderSizes

mxGraph.prototype.getBorderSizes = function()

Returns the size of the border and padding on all four sides of the container. The left, top, right and bottom borders are stored in the x, y, width and height of the returned mxRectangle, respectively.

getPreferredPageSize

mxGraph.prototype.getPreferredPageSize = function( bounds,
width,
height )

Returns the preferred size of the background page if preferPageSize is true.

fit

mxGraph.prototype.fit = function( border,
keepOrigin,
margin,
enabled,
ignoreWidth,
ignoreHeight,
maxHeight )

Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view. To fit an initial graph prior to rendering, set mxGraphView.rendering to false prior to changing the model and execute the following after changing the model.

graph.fit();
graph.view.rendering = true;
graph.refresh();

To fit and center the graph, the following code can be used.

var margin = 2;
var max = 3;

var bounds = graph.getGraphBounds();
var cw = graph.container.clientWidth - margin;
var ch = graph.container.clientHeight - margin;
var w = bounds.width / graph.view.scale;
var h = bounds.height / graph.view.scale;
var s = Math.min(max, Math.min(cw / w, ch / h));

graph.view.scaleAndTranslate(s,
  (margin + cw - w * s) / (2 * s) - bounds.x / graph.view.scale,
  (margin + ch - h * s) / (2 * s) - bounds.y / graph.view.scale);

Parameters

border	Optional number that specifies the border. Default is border.
keepOrigin	Optional boolean that specifies if the translate should be changed. Default is false.
margin	Optional margin in pixels. Default is 0.
enabled	Optional boolean that specifies if the scale should be set or just returned. Default is true.
ignoreWidth	Optional boolean that specifies if the width should be ignored. Default is false.
ignoreHeight	Optional boolean that specifies if the height should be ignored. Default is false.
maxHeight	Optional maximum height.

sizeDidChange

mxGraph.prototype.sizeDidChange = function()

Called when the size of the graph has changed. This implementation fires a <size> event after updating the clipping region of the SVG element in SVG-bases browsers.

doResizeContainer

mxGraph.prototype.doResizeContainer = function( width,
height )

Resizes the container for the given graph width and height.

updatePageBreaks

mxGraph.prototype.updatePageBreaks = function( visible,
width,
height )

Invokes from sizeDidChange to redraw the page breaks.

Parameters

visible	Boolean that specifies if page breaks should be shown.
width	Specifies the width of the container in pixels.
height	Specifies the height of the container in pixels.

Cell styles

getCellStyle

mxGraph.prototype.getCellStyle = function( cell )

Returns an array of key, value pairs representing the cell style for the given cell. If no string is defined in the model that specifies the style, then the default style for the cell is returned or an empty object, if no style can be found. Note: You should try and get the cell state for the given cell and use the cached style in the state before using this method.

Parameters

cell	mxCell whose style should be returned as an array.

postProcessCellStyle

mxGraph.prototype.postProcessCellStyle = function( style )

Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF.

setCellStyle

mxGraph.prototype.setCellStyle = function( style,
cells )

Sets the style of the specified cells. If no cells are given, then the selection cells are changed.

Parameters

style	String representing the new style of the cells.
cells	Optional array of mxCells to set the style for. Default is the selection cells.

toggleCellStyle

mxGraph.prototype.toggleCellStyle = function( key,
defaultValue,
cell )

Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1. If no cell is specified then the selection cell is used.

Parameter

key	String representing the key for the boolean value to be toggled.
defaultValue	Optional boolean default value if no value is defined. Default is false.
cell	Optional mxCell whose style should be modified. Default is the selection cell.

toggleCellStyles

mxGraph.prototype.toggleCellStyles = function( key,
defaultValue,
cells )

Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1. If no cells are specified, then the selection cells are used. For example, this can be used to toggle mxConstants.STYLE_ROUNDED or any other style with a boolean value.

Parameter

key	String representing the key for the boolean value to be toggled.
defaultValue	Optional boolean default value if no value is defined. Default is false.
cells	Optional array of mxCells whose styles should be modified. Default is the selection cells.

setCellStyles

mxGraph.prototype.setCellStyles = function( key,
value,
cells )

Sets the key to value in the styles of the given cells. This will modify the existing cell styles in-place and override any existing assignment for the given key. If no cells are specified, then the selection cells are changed. If no value is specified, then the respective key is removed from the styles.

Parameters

key	String representing the key to be assigned.
value	String representing the new value for the key.
cells	Optional array of mxCells to change the style for. Default is the selection cells.

toggleCellStyleFlags

mxGraph.prototype.toggleCellStyleFlags = function( key,
flag,
cells )

Toggles the given bit for the given key in the styles of the specified cells.

Parameters

key	String representing the key to toggle the flag in.
flag	Integer that represents the bit to be toggled.
cells	Optional array of mxCells to change the style for. Default is the selection cells.

setCellStyleFlags

mxGraph.prototype.setCellStyleFlags = function( key,
flag,
value,
cells )

Sets or toggles the given bit for the given key in the styles of the specified cells.

Parameters

key	String representing the key to toggle the flag in.
flag	Integer that represents the bit to be toggled.
value	Boolean value to be used or null if the value should be toggled.
cells	Optional array of mxCells to change the style for. Default is the selection cells.

Cell alignment and orientation

alignCells

mxGraph.prototype.alignCells = function( align,
cells,
param )

Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.

Parameters

align	Specifies the alignment. Possible values are all constants in mxConstants with an ALIGN prefix.
cells	Array of mxCells to be aligned.
param	Optional coordinate for the alignment.

flipEdge

mxGraph.prototype.flipEdge = function( edge )

Toggles the style of the given edge between null (or empty) and alternateEdgeStyle. This method fires mxEvent.FLIP_EDGE while the transaction is in progress. Returns the edge that was flipped.

Here is an example that overrides this implementation to invert the value of mxConstants.STYLE_ELBOW without removing any existing styles.

graph.flipEdge = function(edge)
{
  if (edge != null)
  {
    var state = this.view.getState(edge);
    var style = (state != null) ? state.style : this.getCellStyle(edge);

    if (style != null)
    {
      var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
          mxConstants.ELBOW_HORIZONTAL);
      var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
          mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
      this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
    }
  }
};

Parameters

edge	mxCell whose style should be changed.

addImageBundle

mxGraph.prototype.addImageBundle = function( bundle )

Adds the specified mxImageBundle.

removeImageBundle

mxGraph.prototype.removeImageBundle = function( bundle )

Removes the specified mxImageBundle.

getImageFromBundles

mxGraph.prototype.getImageFromBundles = function( key )

Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.

Order

orderCells

mxGraph.prototype.orderCells = function( back,
cells )

Moves the given cells to the front or back. The change is carried out using cellsOrdered. This method fires mxEvent.ORDER_CELLS while the transaction is in progress.

Parameters

back	Boolean that specifies if the cells should be moved to back.
cells	Array of mxCells to move to the background. If null is specified then the selection cells are used.

cellsOrdered

mxGraph.prototype.cellsOrdered = function( cells,
back )

Moves the given cells to the front or back. This method fires mxEvent.CELLS_ORDERED while the transaction is in progress.

Parameters

cells	Array of mxCells whose order should be changed.
back	Boolean that specifies if the cells should be moved to back.

Grouping

groupCells

mxGraph.prototype.groupCells = function( group,
border,
cells )

Adds the cells into the given group. The change is carried out using cellsAdded, cellsMoved and cellsResized. This method fires mxEvent.GROUP_CELLS while the transaction is in progress. Returns the new group. A group is only created if there is at least one entry in the given array of cells.

Parameters

group	mxCell that represents the target group. If null is specified then a new group is created using createGroupCell.
border	Optional integer that specifies the border between the child area and the group bounds. Default is 0.
cells	Optional array of mxCells to be grouped. If null is specified then the selection cells are used.

getCellsForGroup

mxGraph.prototype.getCellsForGroup = function( cells )

Returns the cells with the same parent as the first cell in the given array.

getBoundsForGroup

mxGraph.prototype.getBoundsForGroup = function( group,
children,
border )

Returns the bounds to be used for the given group and children.

createGroupCell

mxGraph.prototype.createGroupCell = function( cells )

Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.

The following code can be used to set the style of new group cells.

var graphCreateGroupCell = graph.createGroupCell;
graph.createGroupCell = function(cells)
{
  var group = graphCreateGroupCell.apply(this, arguments);
  group.setStyle('group');

  return group;
};

ungroupCells

mxGraph.prototype.ungroupCells = function( cells )

Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups. Returns the children that have been removed from the groups.

Parameters

cells

Array of cells to be ungrouped. If null is specified then the selection cells are used.

removeCellsAfterUngroup

mxGraph.prototype.removeCellsAfterUngroup = function( cells )

Hook to remove the groups after ungroupCells.

Parameters

cells

Array of mxCells that were ungrouped.

removeCellsFromParent

mxGraph.prototype.removeCellsFromParent = function( cells )

Removes the specified cells from their parents and adds them to the default parent. Returns the cells that were removed from their parents.

Parameters

cells

Array of mxCells to be removed from their parents.

updateGroupBounds

mxGraph.prototype.updateGroupBounds = function( cells,
border,
moveGroup,
topBorder,
rightBorder,
bottomBorder,
leftBorder )

Updates the bounds of the given groups to include all children and returns the passed-in cells. Call this with the groups in parent to child order, top-most group first, the cells are processed in reverse order and cells with no children are ignored.

Parameters

cells	The groups whose bounds should be updated. If this is null, then the selection cells are used.
border	Optional border to be added in the group. Default is 0.
moveGroup	Optional boolean that allows the group to be moved. Default is false.
topBorder	Optional top border to be added in the group. Default is 0.
rightBorder	Optional top border to be added in the group. Default is 0.
bottomBorder	Optional top border to be added in the group. Default is 0.
leftBorder	Optional top border to be added in the group. Default is 0.

getBoundingBox

mxGraph.prototype.getBoundingBox = function( cells )

Returns the bounding box for the given array of mxCells. The bounding box for each cell and its descendants is computed using mxGraphView.getBoundingBox.

Parameters

cells

Array of mxCells whose bounding box should be returned.

Cell cloning, insertion and removal

cloneCell

mxGraph.prototype.cloneCell = function( cell,
allowInvalidEdges,
mapping,
keepPosition )

Returns the clone for the given cell. Uses cloneCells.

Parameters

cell	mxCell to be cloned.
allowInvalidEdges	Optional boolean that specifies if invalid edges should be cloned. Default is true.
mapping	Optional mapping for existing clones.
keepPosition	Optional boolean indicating if the position of the cells should be updated to reflect the lost parent cell. Default is false.

cloneCells

mxGraph.prototype.cloneCells = function( cells,
allowInvalidEdges,
mapping,
keepPosition )

Returns the clones for the given cells. The clones are created recursively using mxGraphModel.cloneCells. If the terminal of an edge is not in the given array, then the respective end is assigned a terminal point and the terminal is removed.

Parameters

cells	Array of mxCells to be cloned.
allowInvalidEdges	Optional boolean that specifies if invalid edges should be cloned. Default is true.
mapping	Optional mapping for existing clones.
keepPosition	Optional boolean indicating if the position of the cells should be updated to reflect the lost parent cell. Default is false.

insertVertex

mxGraph.prototype.insertVertex = function( parent,
id,
value,
x,
y,
width,
height,
style,
relative )

Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex. The id and style are used for the respective properties of the new mxCell, which is returned.

When adding new vertices from a mouse event, one should take into account the offset of the graph container and the scale and translation of the view in order to find the correct unscaled, untranslated coordinates using mxGraph.getPointForEvent as follows:

var pt = graph.getPointForEvent(evt);
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null,
         'Hello, World!', x, y, 220, 30);

For adding image cells, the style parameter can be assigned as

stylename;image=imageUrl

See mxGraph for more information on using images.

Parameters

parent	mxCell that specifies the parent of the new vertex.
id	Optional string that defines the Id of the new vertex.
value	Object to be used as the user object.
x	Integer that defines the x coordinate of the vertex.
y	Integer that defines the y coordinate of the vertex.
width	Integer that defines the width of the vertex.
height	Integer that defines the height of the vertex.
style	Optional string that defines the cell style.
relative	Optional boolean that specifies if the geometry is relative. Default is false.

createVertex

mxGraph.prototype.createVertex = function( parent,
id,
value,
x,
y,
width,
height,
style,
relative )

Hook method that creates the new vertex for insertVertex.

insertEdge

mxGraph.prototype.insertEdge = function( parent,
id,
value,
source,
target,
style )

Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge. The id and style are used for the respective properties of the new mxCell, which is returned.

Parameters

parent	mxCell that specifies the parent of the new edge.
id	Optional string that defines the Id of the new edge.
value	JavaScript object to be used as the user object.
source	mxCell that defines the source of the edge.
target	mxCell that defines the target of the edge.
style	Optional string that defines the cell style.

createEdge

mxGraph.prototype.createEdge = function( parent,
id,
value,
source,
target,
style )

Hook method that creates the new edge for insertEdge. This implementation does not set the source and target of the edge, these are set when the edge is added to the model.

addEdge

mxGraph.prototype.addEdge = function( edge,
parent,
source,
target,
index )

Adds the edge to the parent and connects it to the given source and target terminals. This is a shortcut method. Returns the edge that was added.

Parameters

edge	mxCell to be inserted into the given parent.
parent	mxCell that represents the new parent. If no parent is given then the default parent is used.
source	Optional mxCell that represents the source terminal.
target	Optional mxCell that represents the target terminal.
index	Optional index to insert the cells at. Default is to append.

addCell

mxGraph.prototype.addCell = function( cell,
parent,
index,
source,
target )

Adds the cell to the parent and connects it to the given source and target terminals. This is a shortcut method. Returns the cell that was added.

Parameters

cell	mxCell to be inserted into the given parent.
parent	mxCell that represents the new parent. If no parent is given then the default parent is used.
index	Optional index to insert the cells at. Default is to append.
source	Optional mxCell that represents the source terminal.
target	Optional mxCell that represents the target terminal.

addCells

mxGraph.prototype.addCells = function( cells,
parent,
index,
source,
target )

Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal. The change is carried out using cellsAdded. This method fires mxEvent.ADD_CELLS while the transaction is in progress. Returns the cells that were added.

Parameters

cells	Array of mxCells to be inserted.
parent	mxCell that represents the new parent. If no parent is given then the default parent is used.
index	Optional index to insert the cells at. Default is to append.
source	Optional source mxCell for all inserted cells.
target	Optional target mxCell for all inserted cells.

cellsAdded

mxGraph.prototype.cellsAdded = function( cells,
parent,
index,
source,
target,
absolute,
constrain,
extend )

Adds the specified cells to the given parent. This method fires mxEvent.CELLS_ADDED while the transaction is in progress.

autoSizeCell

mxGraph.prototype.autoSizeCell = function( cell,
recurse )

Resizes the specified cell to just fit around the its label and/or children

Parameters

cell	mxCells to be resized.
recurse	Optional boolean which specifies if all descendants should be autosized. Default is true.

removeCells

mxGraph.prototype.removeCells = function( cells,
includeEdges )

Removes the given cells from the graph including all connected edges if includeEdges is true. The change is carried out using cellsRemoved. This method fires mxEvent.REMOVE_CELLS while the transaction is in progress. The removed cells are returned as an array.

Parameters

cells	Array of mxCells to remove. If null is specified then the selection cells which are deletable are used.
includeEdges	Optional boolean which specifies if all connected edges should be removed as well. Default is true.

cellsRemoved

mxGraph.prototype.cellsRemoved = function( cells )

Removes the given cells from the model. This method fires mxEvent.CELLS_REMOVED while the transaction is in progress.

Parameters

cells

Array of mxCells to remove.

splitEdge

mxGraph.prototype.splitEdge = function( edge,
cells,
newEdge,
dx,
dy )

Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell. This method fires mxEvent.SPLIT_EDGE while the transaction is in progress. Returns the new edge that was inserted.

Parameters

edge	mxCell that represents the edge to be splitted.
cells	mxCells that represents the cells to insert into the edge.
newEdge	mxCell that represents the edge to be inserted.
dx	Optional integer that specifies the vector to move the cells.
dy	Optional integer that specifies the vector to move the cells.

Cell visibility

toggleCells

mxGraph.prototype.toggleCells = function( show,
cells,
includeEdges )

Sets the visible state of the specified cells and all connected edges if includeEdges is true. The change is carried out using cellsToggled. This method fires mxEvent.TOGGLE_CELLS while the transaction is in progress. Returns the cells whose visible state was changed.

Parameters

show	Boolean that specifies the visible state to be assigned.
cells	Array of mxCells whose visible state should be changed. If null is specified then the selection cells are used.
includeEdges	Optional boolean indicating if the visible state of all connected edges should be changed as well. Default is true.

cellsToggled

mxGraph.prototype.cellsToggled = function( cells,
show )

Sets the visible state of the specified cells.

Parameters

cells	Array of mxCells whose visible state should be changed.
show	Boolean that specifies the visible state to be assigned.

Folding

foldCells

mxGraph.prototype.foldCells = function( collapse,
recurse,
cells,
checkFoldable,
evt )

Sets the collapsed state of the specified cells and all descendants if recurse is true. The change is carried out using cellsFolded. This method fires mxEvent.FOLD_CELLS while the transaction is in progress. Returns the cells whose collapsed state was changed.

Parameters

collapsed	Boolean indicating the collapsed state to be assigned.
recurse	Optional boolean indicating if the collapsed state of all descendants should be set. Default is false.
cells	Array of mxCells whose collapsed state should be set. If null is specified then the foldable selection cells are used.
checkFoldable	Optional boolean indicating of isCellFoldable should be checked. Default is false.
evt	Optional native event that triggered the invocation.

cellsFolded

mxGraph.prototype.cellsFolded = function( cells,
collapse,
recurse,
checkFoldable )

Sets the collapsed state of the specified cells. This method fires mxEvent.CELLS_FOLDED while the transaction is in progress. Returns the cells whose collapsed state was changed.

Parameters

cells	Array of mxCells whose collapsed state should be set.
collapsed	Boolean indicating the collapsed state to be assigned.
recurse	Boolean indicating if the collapsed state of all descendants should be set.
checkFoldable	Optional boolean indicating of isCellFoldable should be checked. Default is false.

swapBounds

mxGraph.prototype.swapBounds = function( cell,
willCollapse )

Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.

Parameters

cell	mxCell for which the bounds should be swapped.
willCollapse	Boolean indicating if the cell is going to be collapsed.

updateAlternateBounds

mxGraph.prototype.updateAlternateBounds = function( cell,
geo,
willCollapse )

Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed. If no alternate bounds are defined in the geometry and collapseToPreferredSize is true, then the preferred size is used for the alternate bounds. The top, left corner is always kept at the same location.

Parameters

cell	mxCell for which the geometry is being udpated.
g	mxGeometry for which the alternate bounds should be updated.
willCollapse	Boolean indicating if the cell is going to be collapsed.

addAllEdges

mxGraph.prototype.addAllEdges = function( cells )

Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.

getAllEdges

mxGraph.prototype.getAllEdges = function( cells )

Returns all edges connected to the given cells or its descendants.

Cell sizing

updateCellSize

mxGraph.prototype.updateCellSize = function( cell,
ignoreChildren )

Updates the size of the given cell in the model using cellSizeUpdated. This method fires mxEvent.UPDATE_CELL_SIZE while the transaction is in progress. Returns the cell whose size was updated.

Parameters

cell	mxCell whose size should be updated.

cellSizeUpdated

mxGraph.prototype.cellSizeUpdated = function( cell,
ignoreChildren )

Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.

Parameters

cell	mxCell for which the size should be changed.

getPreferredSizeForCell

mxGraph.prototype.getPreferredSizeForCell = function( cell )

Returns the preferred width and height of the given mxCell as an mxRectangle. To implement a minimum width, add a new style eg. minWidth in the vertex and override this method as follows.

var graphGetPreferredSizeForCell = graph.getPreferredSizeForCell;
graph.getPreferredSizeForCell = function(cell)
{
  var result = graphGetPreferredSizeForCell.apply(this, arguments);
  var style = this.getCellStyle(cell);

  if (style['minWidth'] > 0)
  {
    result.width = Math.max(style['minWidth'], result.width);
  }

  return result;
};

Parameters

cell	mxCell for which the preferred size should be returned.

resizeCell

mxGraph.prototype.resizeCell = function( cell,
bounds,
recurse )

Sets the bounds of the given cell using resizeCells. Returns the cell which was passed to the function.

Parameters

cell	mxCell whose bounds should be changed.
bounds	mxRectangle that represents the new bounds.

resizeCells

mxGraph.prototype.resizeCells = function( cells,
bounds,
recurse )

Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress. Returns the cells which have been passed to the function.

Parameters

cells	Array of mxCells whose bounds should be changed.
bounds	Array of mxRectangles that represent the new bounds.

cellsResized

mxGraph.prototype.cellsResized = function( cells,
bounds,
recurse )

Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event. If extendParents is true, then the parent is extended if a child size is changed so that it overlaps with the parent.

The following example shows how to control group resizes to make sure that all child cells stay within the group.

graph.addListener(mxEvent.CELLS_RESIZED, function(sender, evt)
{
  var cells = evt.getProperty('cells');

  if (cells != null)
  {
    for (var i = 0; i < cells.length; i++)
    {
      if (graph.getModel().getChildCount(cells[i]) > 0)
      {
        var geo = graph.getCellGeometry(cells[i]);

        if (geo != null)
        {
          var children = graph.getChildCells(cells[i], true, true);
          var bounds = graph.getBoundingBoxFromGeometry(children, true);

          geo = geo.clone();
          geo.width = Math.max(geo.width, bounds.width);
          geo.height = Math.max(geo.height, bounds.height);

          graph.getModel().setGeometry(cells[i], geo);
        }
      }
    }
  }
});

Parameters

cells	Array of mxCells whose bounds should be changed.
bounds	Array of mxRectangles that represent the new bounds.
recurse	Optional boolean that specifies if the children should be resized.

cellResized

mxGraph.prototype.cellResized = function( cell,
bounds,
ignoreRelative,
recurse )

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Parameters

cell	mxCell whose bounds should be changed.
bounds	mxRectangles that represent the new bounds.
ignoreRelative	Boolean that indicates if relative cells should be ignored.
recurse	Optional boolean that specifies if the children should be resized.

resizeChildCells

mxGraph.prototype.resizeChildCells = function( cell,
newGeo )

Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.

Parameters

cell	mxCell that has been resized.
newGeo	mxGeometry that represents the new bounds.

constrainChildCells

mxGraph.prototype.constrainChildCells = function( cell )

Constrains the children of the given cell using constrainChild.

Parameters

cell	mxCell that has been resized.

scaleCell

mxGraph.prototype.scaleCell = function( cell,
dx,
dy,
recurse )

Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.

Parameters

cell	mxCell whose geometry should be scaled.
dx	Horizontal scaling factor.
dy	Vertical scaling factor.
recurse	Boolean indicating if the child cells should be scaled.

extendParent

mxGraph.prototype.extendParent = function( cell )

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Parameters

cell	mxCell that has been resized.

Cell moving

importCells

mxGraph.prototype.importCells = function( cells,
dx,
dy,
target,
evt,
mapping )

Clones and inserts the given cells into the graph using the move method and returns the inserted cells. This shortcut is used if cells are inserted via datatransfer.

Parameters

cells	Array of mxCells to be imported.
dx	Integer that specifies the x-coordinate of the vector. Default is 0.
dy	Integer that specifies the y-coordinate of the vector. Default is 0.
target	mxCell that represents the new parent of the cells.
evt	Mouseevent that triggered the invocation.
mapping	Optional mapping for existing clones.

moveCells

mxGraph.prototype.moveCells = function( cells,
dx,
dy,
clone,
target,
evt,
mapping )

Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell. The evt is the mouse event as the mouse was released. The change is carried out using cellsMoved. This method fires mxEvent.MOVE_CELLS while the transaction is in progress. Returns the cells that were moved.

Use the following code to move all cells in the graph.

graph.moveCells(graph.getChildCells(null, true, true), 10, 10);

Parameters

cells	Array of mxCells to be moved, cloned or added to the target.
dx	Integer that specifies the x-coordinate of the vector. Default is 0.
dy	Integer that specifies the y-coordinate of the vector. Default is 0.
clone	Boolean indicating if the cells should be cloned. Default is false.
target	mxCell that represents the new parent of the cells.
evt	Mouseevent that triggered the invocation.
mapping	Optional mapping for existing clones.

cellsMoved

mxGraph.prototype.cellsMoved = function( cells,
dx,
dy,
disconnect,
constrain,
extend )

Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true. This method fires mxEvent.CELLS_MOVED while the transaction is in progress.

translateCell

mxGraph.prototype.translateCell = function( cell,
dx,
dy )

Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.

getCellContainmentArea

mxGraph.prototype.getCellContainmentArea = function( cell )

Returns the mxRectangle inside which a cell is to be kept.

Parameters

cell	mxCell for which the area should be returned.

getMaximumGraphBounds

mxGraph.prototype.getMaximumGraphBounds = function()

Returns the bounds inside which the diagram should be kept as an mxRectangle.

constrainChild

mxGraph.prototype.constrainChild = function( cell,
sizeFirst )

Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild. This modifies the cell’s geometry in-place and does not clone it.

Parameters

cells	mxCell which should be constrained.
sizeFirst	Specifies if the size should be changed first. Default is true.

resetEdges

mxGraph.prototype.resetEdges = function( cells )

Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.

Parameters

cells

Array of mxCells for which the connected edges should be reset.

resetEdge

mxGraph.prototype.resetEdge = function( edge )

Resets the control points of the given edge.

Parameters

edge	mxCell whose points should be reset.

Cell connecting and connection constraints

getOutlineConstraint

mxGraph.prototype.getOutlineConstraint = function( point,
terminalState,
me )

Returns the constraint used to connect to the outline of the given state.

getAllConnectionConstraints

mxGraph.prototype.getAllConnectionConstraints = function( terminal,
source )

Returns an array of all mxConnectionConstraints for the given terminal. If the shape of the given terminal is a <mxStencilShape> then the constraints of the corresponding mxStencil are returned.

Parameters

terminal	mxCellState that represents the terminal.
source	Boolean that specifies if the terminal is the source or target.

getConnectionConstraint

mxGraph.prototype.getConnectionConstraint = function( edge,
terminal,
source )

Returns an mxConnectionConstraint that describes the given connection point. This result can then be passed to getConnectionPoint.

Parameters

edge	mxCellState that represents the edge.
terminal	mxCellState that represents the terminal.
source	Boolean indicating if the terminal is the source or target.

setConnectionConstraint

mxGraph.prototype.setConnectionConstraint = function( edge,
terminal,
source,
constraint )

Sets the mxConnectionConstraint that describes the given connection point. If no constraint is given then nothing is changed. To remove an existing constraint from the given edge, use an empty constraint instead.

Parameters

edge	mxCell that represents the edge.
terminal	mxCell that represents the terminal.
source	Boolean indicating if the terminal is the source or target.
constraint	Optional mxConnectionConstraint to be used for this connection.

getConnectionPoint

mxGraph.prototype.getConnectionPoint = function( vertex,
constraint,
round )

Returns the nearest point in the list of absolute points or the center of the opposite terminal.

Parameters

vertex	mxCellState that represents the vertex.
constraint	mxConnectionConstraint that represents the connection point constraint as returned by getConnectionConstraint.

connectCell

mxGraph.prototype.connectCell = function( edge,
terminal,
source,
constraint )

Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress. Returns the updated edge.

Parameters

edge	mxCell whose terminal should be updated.
terminal	mxCell that represents the new terminal to be used.
source	Boolean indicating if the new terminal is the source or target.
constraint	Optional mxConnectionConstraint to be used for this connection.

cellConnected

mxGraph.prototype.cellConnected = function( edge,
terminal,
source,
constraint )

Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true. This method fires mxEvent.CELL_CONNECTED while the transaction is in progress.

Parameters

edge	mxCell whose terminal should be updated.
terminal	mxCell that represents the new terminal to be used.
source	Boolean indicating if the new terminal is the source or target.
constraint	mxConnectionConstraint to be used for this connection.

disconnectGraph

mxGraph.prototype.disconnectGraph = function( cells )

Disconnects the given edges from the terminals which are not in the given array.

Parameters

cells

Array of mxCells to be disconnected.

Drilldown

getCurrentRoot

mxGraph.prototype.getCurrentRoot = function()

Returns the current root of the displayed cell hierarchy. This is a shortcut to mxGraphView.currentRoot in view.

getTranslateForRoot

mxGraph.prototype.getTranslateForRoot = function( cell )

Returns the translation to be used if the given cell is the root cell as an mxPoint. This implementation returns null.

Example

To keep the children at their absolute position while stepping into groups, this function can be overridden as follows.

var offset = new mxPoint(0, 0);

while (cell != null)
{
  var geo = this.model.getGeometry(cell);

  if (geo != null)
  {
    offset.x -= geo.x;
    offset.y -= geo.y;
  }

  cell = this.model.getParent(cell);
}

return offset;

Parameters

cell	mxCell that represents the root.

isPort

mxGraph.prototype.isPort = function( cell )

Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT. Note that a port should not be movable. This implementation always returns false.

A typical implementation is the following

graph.isPort = function(cell)
{
  var geo = this.getCellGeometry(cell);

  return (geo != null) ? geo.relative : false;
};

Parameters

cell	mxCell that represents the port.

getTerminalForPort

mxGraph.prototype.getTerminalForPort = function( cell,
source )

Returns the terminal to be used for a given port. This implementation always returns the parent cell.

Parameters

cell	mxCell that represents the port.
source	If the cell is the source or target port.

getChildOffsetForCell

mxGraph.prototype.getChildOffsetForCell = function( cell )

Returns the offset to be used for the cells inside the given cell. The root and layer cells may be identified using mxGraphModel.isRoot and mxGraphModel.isLayer. For all other current roots, the mxGraphView.currentRoot field points to the respective cell, so that the following holds: cell == this.view.currentRoot. This implementation returns null.

Parameters

cell	mxCell whose offset should be returned.

enterGroup

mxGraph.prototype.enterGroup = function( cell )

Uses the given cell as the root of the displayed cell hierarchy. If no cell is specified then the selection cell is used. The cell is only used if isValidRoot returns true.

Parameters

cell	Optional mxCell to be used as the new root. Default is the selection cell.

exitGroup

mxGraph.prototype.exitGroup = function()

Changes the current root to the next valid root in the displayed cell hierarchy.

home

mxGraph.prototype.home = function()

Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.

isValidRoot

mxGraph.prototype.isValidRoot = function( cell )

Returns true if the given cell is a valid root for the cell display hierarchy. This implementation returns true for all non-null values.

Parameters

cell	mxCell which should be checked as a possible root.

Graph display

getGraphBounds

mxGraph.prototype.getGraphBounds = function()

Returns the bounds of the visible graph. Shortcut to mxGraphView.getGraphBounds. See also: getBoundingBoxFromGeometry.

getCellBounds

mxGraph.prototype.getCellBounds = function( cell,
includeEdges,
includeDescendants )

Returns the scaled, translated bounds for the given cell. See mxGraphView.getBounds for arrays.

Parameters

cell	mxCell whose bounds should be returned.
includeEdge	Optional boolean that specifies if the bounds of the connected edges should be included. Default is false.
includeDescendants	Optional boolean that specifies if the bounds of all descendants should be included. Default is false.

getBoundingBoxFromGeometry

mxGraph.prototype.getBoundingBoxFromGeometry = function( cells,
includeEdges )

Returns the bounding box for the geometries of the vertices in the given array of cells. This can be used to find the graph bounds during a layout operation (ie. before the last endUpdate) as follows:

var cells = graph.getChildCells(graph.getDefaultParent(), true, true);
var bounds = graph.getBoundingBoxFromGeometry(cells, true);

This can then be used to move cells to the origin

if (bounds.x < 0 || bounds.y < 0)
{
  graph.moveCells(cells, -Math.min(bounds.x, 0), -Math.min(bounds.y, 0))
}

Or to translate the graph view

if (bounds.x < 0 || bounds.y < 0)
{
  graph.view.setTranslate(-Math.min(bounds.x, 0), -Math.min(bounds.y, 0));
}

Parameters

cells	Array of mxCells whose bounds should be returned.
includeEdges	Specifies if edge bounds should be included by computing the bounding box for all points in geometry. Default is false.

refresh

mxGraph.prototype.refresh = function( cell )

Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph. This fires a refresh event as the last step.

Parameters

cell	Optional mxCell for which the cell states should be cleared.

snap

mxGraph.prototype.snap = function( value )

Snaps the given numeric value to the grid if gridEnabled is true.

Parameters

value

Numeric value to be snapped to the grid.

panGraph

mxGraph.prototype.panGraph = function( dx,
dy )

Shifts the graph display by the given amount. This is used to preview panning operations, use mxGraphView.setTranslate to set a persistent translation of the view. Fires mxEvent.PAN.

Parameters

dx	Amount to shift the graph along the x-axis.
dy	Amount to shift the graph along the y-axis.

zoomIn

mxGraph.prototype.zoomIn = function()

Zooms into the graph by zoomFactor.

zoomOut

mxGraph.prototype.zoomOut = function()

Zooms out of the graph by zoomFactor.

zoomActual

mxGraph.prototype.zoomActual = function()

Resets the zoom and panning in the view.

zoomTo

mxGraph.prototype.zoomTo = function( scale,
center )

Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.

center

mxGraph.prototype.center = function( horizontal,
vertical,
cx,
cy )

Centers the graph in the container.

Parameters

horizontal	Optional boolean that specifies if the graph should be centered horizontally. Default is true.
vertical	Optional boolean that specifies if the graph should be centered vertically. Default is true.
cx	Optional float that specifies the horizontal center. Default is 0.5.
cy	Optional float that specifies the vertical center. Default is 0.5.

zoom

mxGraph.prototype.zoom = function( factor,
center )

Zooms the graph using the given factor. Center is an optional boolean argument that keeps the graph scrolled to the center. If the center argument is omitted, then centerZoom will be used as its value.

zoomToRect

mxGraph.prototype.zoomToRect = function( rect )

Zooms the graph to the specified rectangle. If the rectangle does not have same aspect ratio as the display container, it is increased in the smaller relative dimension only until the aspect match. The original rectangle is centralised within this expanded one.

Note that the input rectangular must be un-scaled and un-translated.

Parameters

rect	The un-scaled and un-translated rectangluar region that should be just visible after the operation

scrollCellToVisible

mxGraph.prototype.scrollCellToVisible = function( cell,
center )

Pans the graph so that it shows the given cell. Optionally the cell may be centered in the container.

To center a given graph if the <container> has no scrollbars, use the following code.

[code] var bounds = graph.getGraphBounds(); graph.view.setTranslate(-bounds.x - (bounds.width - container.clientWidth) / 2, -bounds.y - (bounds.height - container.clientHeight) / 2); [/code]

Parameters

cell	mxCell to be made visible.
center	Optional boolean flag. Default is false.

scrollRectToVisible

mxGraph.prototype.scrollRectToVisible = function( rect )

Pans the graph so that it shows the given rectangle.

Parameters

rect	mxRectangle to be made visible.

getCellGeometry

mxGraph.prototype.getCellGeometry = function( cell )

Returns the mxGeometry for the given cell. This implementation uses mxGraphModel.getGeometry. Subclasses can override this to implement specific geometries for cells in only one graph, that is, it can return geometries that depend on the current state of the view.

Parameters

cell	mxCell whose geometry should be returned.

isCellVisible

mxGraph.prototype.isCellVisible = function( cell )

Returns true if the given cell is visible in this graph. This implementation uses mxGraphModel.isVisible. Subclassers can override this to implement specific visibility for cells in only one graph, that is, without affecting the visible state of the cell.

When using dynamic filter expressions for cell visibility, then the graph should be revalidated after the filter expression has changed.

Parameters

cell	mxCell whose visible state should be returned.

isCellCollapsed

mxGraph.prototype.isCellCollapsed = function( cell )

Returns true if the given cell is collapsed in this graph. This implementation uses mxGraphModel.isCollapsed. Subclassers can override this to implement specific collapsed states for cells in only one graph, that is, without affecting the collapsed state of the cell.

When using dynamic filter expressions for the collapsed state, then the graph should be revalidated after the filter expression has changed.

Parameters

cell	mxCell whose collapsed state should be returned.

isCellConnectable

mxGraph.prototype.isCellConnectable = function( cell )

Returns true if the given cell is connectable in this graph. This implementation uses mxGraphModel.isConnectable. Subclassers can override this to implement specific connectable states for cells in only one graph, that is, without affecting the connectable state of the cell in the model.

Parameters

cell	mxCell whose connectable state should be returned.

isOrthogonal

mxGraph.prototype.isOrthogonal = function( edge )

Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.

Parameters

edge	mxCellState that represents the edge.

isLoop

mxGraph.prototype.isLoop = function( state )

Returns true if the given cell state is a loop.

Parameters

state

mxCellState that represents a potential loop.

isCloneEvent

mxGraph.prototype.isCloneEvent = function( evt )

Returns true if the given event is a clone event. This implementation returns true if control is pressed.

isTransparentClickEvent

mxGraph.prototype.isTransparentClickEvent = function( evt )

Hook for implementing click-through behaviour on selected cells. If this returns true the cell behind the selected cell will be selected. This implementation returns false;

isToggleEvent

mxGraph.prototype.isToggleEvent = function( evt )

Returns true if the given event is a toggle event. This implementation returns true if the meta key (Cmd) is pressed on Macs or if control is pressed on any other platform.

isGridEnabledEvent

mxGraph.prototype.isGridEnabledEvent = function( evt )

Returns true if the given mouse event should be aligned to the grid.

isConstrainedEvent

mxGraph.prototype.isConstrainedEvent = function( evt )

Returns true if the given mouse event should be aligned to the grid.

isIgnoreTerminalEvent

mxGraph.prototype.isIgnoreTerminalEvent = function( evt )

Returns true if the given mouse event should not allow any connections to be made. This implementation returns false.

Validation

validationAlert

mxGraph.prototype.validationAlert = function( message )

Displays the given validation error in a dialog. This implementation uses mxUtils.alert.

isEdgeValid

mxGraph.prototype.isEdgeValid = function( edge,
source,
target )

Checks if the return value of getEdgeValidationError for the given arguments is null.

Parameters

edge	mxCell that represents the edge to validate.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

getEdgeValidationError

mxGraph.prototype.getEdgeValidationError = function( edge,
source,
target )

Returns the validation error message to be displayed when inserting or changing an edges’ connectivity. A return value of null means the edge is valid, a return value of ‘’ means it’s not valid, but do not display an error message. Any other (non-empty) string returned from this method is displayed as an error message when trying to connect an edge to a source and target. This implementation uses the multiplicities, and checks multigraph, allowDanglingEdges and allowLoops to generate validation errors.

For extending this method with specific checks for source/target cells, the method can be extended as follows. Returning an empty string means the edge is invalid with no error message, a non-null string specifies the error message, and null means the edge is valid.

graph.getEdgeValidationError = function(edge, source, target)
{
  if (source != null && target != null &&
    this.model.getValue(source) != null &&
    this.model.getValue(target) != null)
  {
    if (target is not valid for source)
    {
      return 'Invalid Target';
    }
  }

  // "Supercall"
  return mxGraph.prototype.getEdgeValidationError.apply(this, arguments);
}

Parameters

edge	mxCell that represents the edge to validate.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

validateEdge

mxGraph.prototype.validateEdge = function( edge,
source,
target )

Hook method for subclassers to return an error message for the given edge and terminals. This implementation returns null.

Parameters

edge	mxCell that represents the edge to validate.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

validateGraph

mxGraph.prototype.validateGraph = function( cell,
context )

Validates the graph by validating each descendant of the given cell or the root of the model. Context is an object that contains the validation state for the complete validation run. The validation errors are attached to their cells using setCellWarning. Returns null in the case of successful validation or an array of strings (warnings) in the case of failed validations.

Paramters

cell	Optional mxCell to start the validation recursion. Default is the graph root.
context	Object that represents the global validation state.

getCellValidationError

mxGraph.prototype.getCellValidationError = function( cell )

Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.

Parameters

cell	mxCell for which the multiplicities should be checked.

validateCell

mxGraph.prototype.validateCell = function( cell,
context )

Hook method for subclassers to return an error message for the given cell and validation context. This implementation returns null. Any HTML breaks will be converted to linefeeds in the calling method.

Parameters

cell	mxCell that represents the cell to validate.
context	Object that represents the global validation state.

Graph appearance

getBackgroundImage

mxGraph.prototype.getBackgroundImage = function()

Returns the backgroundImage as an mxImage.

setBackgroundImage

mxGraph.prototype.setBackgroundImage = function( image )

Sets the new backgroundImage.

Parameters

image

New mxImage to be used for the background.

getFoldingImage

mxGraph.prototype.getFoldingImage = function( state )

Returns the mxImage used to display the collapsed state of the specified cell state. This returns null for all edges.

convertValueToString

mxGraph.prototype.convertValueToString = function( cell )

Returns the textual representation for the given cell. This implementation returns the nodename or string-representation of the user object.

Example

The following returns the label attribute from the cells user object if it is an XML node.

graph.convertValueToString = function(cell)
{
 return cell.getAttribute('label');
}

Parameters

cell	mxCell whose textual representation should be returned.

getLabel

mxGraph.prototype.getLabel = function( cell )

Returns a string or DOM node that represents the label for the given cell. This implementation uses convertValueToString if labelsVisible is true. Otherwise it returns an empty string.

To truncate a label to match the size of the cell, the following code can be used.

graph.getLabel = function(cell)
{
  var label = mxGraph.prototype.getLabel.apply(this, arguments);

  if (label != null && this.model.isVertex(cell))
  {
    var geo = this.getCellGeometry(cell);

    if (geo != null)
    {
      var max = parseInt(geo.width / 8);

      if (label.length > max)
      {
        label = label.substring(0, max)+'...';
      }
    }
  }
  return mxUtils.htmlEntities(label);
}

A resize listener is needed in the graph to force a repaint of the label after a resize.

graph.addListener(mxEvent.RESIZE_CELLS, function(sender, evt)
{
  var cells = evt.getProperty('cells');

  for (var i = 0; i < cells.length; i++)
  {
    this.view.removeState(cells[i]);
  }
});

Parameters

cell	mxCell whose label should be returned.

isHtmlLabel

mxGraph.prototype.isHtmlLabel = function( cell )

Returns true if the label must be rendered as HTML markup. The default implementation returns htmlLabels.

Parameters

cell	mxCell whose label should be displayed as HTML markup.

isHtmlLabels

mxGraph.prototype.isHtmlLabels = function()

Returns htmlLabels.

setHtmlLabels

mxGraph.prototype.setHtmlLabels = function( value )

Sets htmlLabels.

isWrapping

mxGraph.prototype.isWrapping = function( cell )

This enables wrapping for HTML labels.

Returns true if no white-space CSS style directive should be used for displaying the given cells label. This implementation returns true if mxConstants.STYLE_WHITE_SPACE in the style of the given cell is ‘wrap’.

This is used as a workaround for IE ignoring the white-space directive of child elements if the directive appears in a parent element. It should be overridden to return true if a white-space directive is used in the HTML markup that represents the given cells label. In order for HTML markup to work in labels, isHtmlLabel must also return true for the given cell.

Example

graph.getLabel = function(cell)
{
  var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"

  if (this.model.isEdge(cell))
  {
    tmp = '<div style="width: 150px; white-space:normal;">'+tmp+'</div>';
  }

  return tmp;
}

graph.isWrapping = function(state)
{
  return this.model.isEdge(state.cell);
}

Makes sure no edge label is wider than 150 pixels, otherwise the content is wrapped. Note: No width must be specified for wrapped vertex labels as the vertex defines the width in its geometry.

Parameters

state

mxCell whose label should be wrapped.

isLabelClipped

mxGraph.prototype.isLabelClipped = function( cell )

Returns true if the overflow portion of labels should be hidden. If this returns true then vertex labels will be clipped to the size of the vertices. This implementation returns true if mxConstants.STYLE_OVERFLOW in the style of the given cell is ‘hidden’.

Parameters

state

mxCell whose label should be clipped.

getTooltip

mxGraph.prototype.getTooltip = function( state,
node,
x,
y )

Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair. This implementation checks if the given node is a folding icon or overlay and returns the respective tooltip. If this does not result in a tooltip, the handler for the cell is retrieved from <selectionCellsHandler> and the optional getTooltipForNode method is called. If no special tooltip exists here then getTooltipForCell is used with the cell in the given state as the argument to return a tooltip for the given state.

Parameters

state	mxCellState whose tooltip should be returned.
node	DOM node that is currently under the mouse.
x	X-coordinate of the mouse.
y	Y-coordinate of the mouse.

getTooltipForCell

mxGraph.prototype.getTooltipForCell = function( cell )

Returns the string or DOM node to be used as the tooltip for the given cell. This implementation uses the cells getTooltip function if it exists, or else it returns convertValueToString for the cell.

Example

graph.getTooltipForCell = function(cell)
{
  return 'Hello, World!';
}

Replaces all tooltips with the string Hello, World!

Parameters

cell	mxCell whose tooltip should be returned.

getLinkForCell

mxGraph.prototype.getLinkForCell = function( cell )

Returns the string to be used as the link for the given cell. This implementation returns null.

Parameters

cell	mxCell whose tooltip should be returned.

getCursorForMouseEvent

mxGraph.prototype.getCursorForMouseEvent = function( me )

Returns the cursor value to be used for the CSS of the shape for the given event. This implementation calls getCursorForCell.

Parameters

me	mxMouseEvent whose cursor should be returned.

getCursorForCell

mxGraph.prototype.getCursorForCell = function( cell )

Returns the cursor value to be used for the CSS of the shape for the given cell. This implementation returns null.

Parameters

cell	mxCell whose cursor should be returned.

getStartSize

mxGraph.prototype.getStartSize = function( swimlane )

Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style. The return value is an mxRectangle with either width or height set as appropriate.

Parameters

swimlane

mxCell whose start size should be returned.

getImage

mxGraph.prototype.getImage = function( state )

Returns the image URL for the given cell state. This implementation returns the value stored under mxConstants.STYLE_IMAGE in the cell style.

Parameters

state

mxCellState whose image URL should be returned.

getVerticalAlign

mxGraph.prototype.getVerticalAlign = function( state )

Returns the vertical alignment for the given cell state. This implementation returns the value stored under mxConstants.STYLE_VERTICAL_ALIGN in the cell style.

Parameters

state

mxCellState whose vertical alignment should be returned.

getIndicatorColor

mxGraph.prototype.getIndicatorColor = function( state )

Returns the indicator color for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_COLOR in the cell style.

Parameters

state

mxCellState whose indicator color should be returned.

getIndicatorGradientColor

mxGraph.prototype.getIndicatorGradientColor = function( state )

Returns the indicator gradient color for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_GRADIENTCOLOR in the cell style.

Parameters

state

mxCellState whose indicator gradient color should be returned.

getIndicatorShape

mxGraph.prototype.getIndicatorShape = function( state )

Returns the indicator shape for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_SHAPE in the cell style.

Parameters

state

mxCellState whose indicator shape should be returned.

getIndicatorImage

mxGraph.prototype.getIndicatorImage = function( state )

Returns the indicator image for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_IMAGE in the cell style.

Parameters

state

mxCellState whose indicator image should be returned.

getBorder

mxGraph.prototype.getBorder = function()

Returns the value of border.

setBorder

mxGraph.prototype.setBorder = function( value )

Sets the value of border.

Parameters

value

Positive integer that represents the border to be used.

isSwimlane

mxGraph.prototype.isSwimlane = function ( cell )

Returns true if the given cell is a swimlane in the graph. A swimlane is a container cell with some specific behaviour. This implementation checks if the shape associated with the given cell is a mxSwimlane.

Parameters

cell	mxCell to be checked.

Graph behaviour

isResizeContainer

mxGraph.prototype.isResizeContainer = function()

Returns resizeContainer.

setResizeContainer

mxGraph.prototype.setResizeContainer = function( value )

Sets resizeContainer.

Parameters

value

Boolean indicating if the container should be resized.

isEnabled

mxGraph.prototype.isEnabled = function()

Returns true if the graph is enabled.

setEnabled

mxGraph.prototype.setEnabled = function( value )

Specifies if the graph should allow any interactions. This implementation updates enabled.

Parameters

value

Boolean indicating if the graph should be enabled.

isEscapeEnabled

mxGraph.prototype.isEscapeEnabled = function()

Returns escapeEnabled.

setEscapeEnabled

mxGraph.prototype.setEscapeEnabled = function( value )

Sets escapeEnabled.

Parameters

enabled

Boolean indicating if escape should be enabled.

isInvokesStopCellEditing

mxGraph.prototype.isInvokesStopCellEditing = function()

Returns invokesStopCellEditing.

setInvokesStopCellEditing

mxGraph.prototype.setInvokesStopCellEditing = function( value )

Sets invokesStopCellEditing.

isEnterStopsCellEditing

mxGraph.prototype.isEnterStopsCellEditing = function()

Returns enterStopsCellEditing.

setEnterStopsCellEditing

mxGraph.prototype.setEnterStopsCellEditing = function( value )

Sets enterStopsCellEditing.

isCellLocked

mxGraph.prototype.isCellLocked = function( cell )

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cell	mxCell whose locked state should be returned.

isCellsLocked

mxGraph.prototype.isCellsLocked = function()

Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. This implementation returns true for all vertices with a relative geometry if <locked> is false.

Parameters

cell	mxCell whose locked state should be returned.

setCellsLocked

mxGraph.prototype.setCellsLocked = function( value )

Sets if any cell may be moved, sized, bended, disconnected, edited or selected.

Parameters

value

Boolean that defines the new value for cellsLocked.

getCloneableCells

mxGraph.prototype.getCloneableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

isCellCloneable

mxGraph.prototype.isCellCloneable = function( cell )

Returns true if the given cell is cloneable. This implementation returns isCellsCloneable for all cells unless a cell style specifies mxConstants.STYLE_CLONEABLE to be 0.

Parameters

cell	Optional mxCell whose cloneable state should be returned.

isCellsCloneable

mxGraph.prototype.isCellsCloneable = function()

Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.

setCellsCloneable

mxGraph.prototype.setCellsCloneable = function( value )

Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved. This implementation updates cellsCloneable.

Parameters

value

Boolean indicating if the graph should be cloneable.

getExportableCells

mxGraph.prototype.getExportableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

canExportCell

mxGraph.prototype.canExportCell = function( cell )

Returns true if the given cell may be exported to the clipboard. This implementation returns exportEnabled for all cells.

Parameters

cell	mxCell that represents the cell to be exported.

getImportableCells

mxGraph.prototype.getImportableCells = function( cells )

Returns the cells which may be imported in the given array of cells.

canImportCell

mxGraph.prototype.canImportCell = function( cell )

Returns true if the given cell may be imported from the clipboard. This implementation returns importEnabled for all cells.

Parameters

cell	mxCell that represents the cell to be imported.

isCellSelectable

mxGraph.prototype.isCellSelectable = function( cell )

Returns true if the given cell is selectable. This implementation returns cellsSelectable.

To add a new style for making cells (un)selectable, use the following code.

mxGraph.prototype.isCellSelectable = function(cell)
{
  var state = this.view.getState(cell);
  var style = (state != null) ? state.style : this.getCellStyle(cell);

  return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
};

You can then use the new style as shown in this example.

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');

Parameters

cell	mxCell whose selectable state should be returned.

isCellsSelectable

mxGraph.prototype.isCellsSelectable = function()

Returns cellsSelectable.

setCellsSelectable

mxGraph.prototype.setCellsSelectable = function( value )

Sets cellsSelectable.

getDeletableCells

mxGraph.prototype.getDeletableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

isCellDeletable

mxGraph.prototype.isCellDeletable = function( cell )

Returns true if the given cell is moveable. This returns cellsDeletable for all given cells if a cells style does not specify mxConstants.STYLE_DELETABLE to be 0.

Parameters

cell	mxCell whose deletable state should be returned.

isCellsDeletable

mxGraph.prototype.isCellsDeletable = function()

Returns cellsDeletable.

setCellsDeletable

mxGraph.prototype.setCellsDeletable = function( value )

Sets cellsDeletable.

Parameters

value

Boolean indicating if the graph should allow deletion of cells.

isLabelMovable

mxGraph.prototype.isLabelMovable = function( cell )

Returns true if the given edges’s label is moveable. This returns <movable> for all given cells if <isLocked> does not return true for the given cell.

Parameters

cell	mxCell whose label should be moved.

isCellRotatable

mxGraph.prototype.isCellRotatable = function( cell )

Returns true if the given cell is rotatable. This returns true for the given cell if its style does not specify mxConstants.STYLE_ROTATABLE to be 0.

Parameters

cell	mxCell whose rotatable state should be returned.

getMovableCells

mxGraph.prototype.getMovableCells = function( cells )

Returns the cells which are movable in the given array of cells.

isCellMovable

mxGraph.prototype.isCellMovable = function( cell )

Returns true if the given cell is moveable. This returns cellsMovable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_MOVABLE to be 0.

Parameters

cell	mxCell whose movable state should be returned.

isCellsMovable

mxGraph.prototype.isCellsMovable = function()

Returns cellsMovable.

setCellsMovable

mxGraph.prototype.setCellsMovable = function( value )

Specifies if the graph should allow moving of cells. This implementation updates <cellsMsovable>.

Parameters

value

Boolean indicating if the graph should allow moving of cells.

isGridEnabled

mxGraph.prototype.isGridEnabled = function()

Returns gridEnabled as a boolean.

setGridEnabled

mxGraph.prototype.setGridEnabled = function( value )

Specifies if the grid should be enabled.

Parameters

value

Boolean indicating if the grid should be enabled.

isPortsEnabled

mxGraph.prototype.isPortsEnabled = function()

Returns portsEnabled as a boolean.

setPortsEnabled

mxGraph.prototype.setPortsEnabled = function( value )

Specifies if the ports should be enabled.

Parameters

value

Boolean indicating if the ports should be enabled.

getGridSize

mxGraph.prototype.getGridSize = function()

Returns gridSize.

setGridSize

mxGraph.prototype.setGridSize = function( value )

Sets gridSize.

getTolerance

mxGraph.prototype.getTolerance = function()

Returns tolerance.

setTolerance

mxGraph.prototype.setTolerance = function( value )

Sets tolerance.

isVertexLabelsMovable

mxGraph.prototype.isVertexLabelsMovable = function()

Returns vertexLabelsMovable.

setVertexLabelsMovable

mxGraph.prototype.setVertexLabelsMovable = function( value )

Sets vertexLabelsMovable.

isEdgeLabelsMovable

mxGraph.prototype.isEdgeLabelsMovable = function()

Returns edgeLabelsMovable.

isEdgeLabelsMovable

Sets edgeLabelsMovable.

isSwimlaneNesting

mxGraph.prototype.isSwimlaneNesting = function()

Returns swimlaneNesting as a boolean.

setSwimlaneNesting

mxGraph.prototype.setSwimlaneNesting = function( value )

Specifies if swimlanes can be nested by drag and drop. This is only taken into account if dropEnabled is true.

Parameters

value

Boolean indicating if swimlanes can be nested.

isSwimlaneSelectionEnabled

mxGraph.prototype.isSwimlaneSelectionEnabled = function()

Returns swimlaneSelectionEnabled as a boolean.

setSwimlaneSelectionEnabled

mxGraph.prototype.setSwimlaneSelectionEnabled = function( value )

Specifies if swimlanes should be selected if the mouse is released over their content area.

Parameters

value

Boolean indicating if swimlanes content areas should be selected when the mouse is released over them.

isMultigraph

mxGraph.prototype.isMultigraph = function()

Returns multigraph as a boolean.

setMultigraph

mxGraph.prototype.setMultigraph = function( value )

Specifies if the graph should allow multiple connections between the same pair of vertices.

Parameters

value

Boolean indicating if the graph allows multiple connections between the same pair of vertices.

isAllowLoops

mxGraph.prototype.isAllowLoops = function()

Returns allowLoops as a boolean.

setAllowDanglingEdges

mxGraph.prototype.setAllowDanglingEdges = function( value )

Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.

Parameters

value

Boolean indicating if dangling edges are allowed.

isAllowDanglingEdges

mxGraph.prototype.isAllowDanglingEdges = function()

Returns allowDanglingEdges as a boolean.

setConnectableEdges

mxGraph.prototype.setConnectableEdges = function( value )

Specifies if edges should be connectable.

Parameters

value

Boolean indicating if edges should be connectable.

isConnectableEdges

mxGraph.prototype.isConnectableEdges = function()

Returns connectableEdges as a boolean.

setCloneInvalidEdges

mxGraph.prototype.setCloneInvalidEdges = function( value )

Specifies if edges should be inserted when cloned but not valid wrt. getEdgeValidationError. If false such edges will be silently ignored.

Parameters

value

Boolean indicating if cloned invalid edges should be inserted into the graph or ignored.

isCloneInvalidEdges

mxGraph.prototype.isCloneInvalidEdges = function()

Returns cloneInvalidEdges as a boolean.

setAllowLoops

mxGraph.prototype.setAllowLoops = function( value )

Specifies if loops are allowed.

Parameters

value

Boolean indicating if loops are allowed.

isDisconnectOnMove

mxGraph.prototype.isDisconnectOnMove = function()

Returns disconnectOnMove as a boolean.

setDisconnectOnMove

mxGraph.prototype.setDisconnectOnMove = function( value )

Specifies if edges should be disconnected when moved. (Note: Cloned edges are always disconnected.)

Parameters

value

Boolean indicating if edges should be disconnected when moved.

isDropEnabled

mxGraph.prototype.isDropEnabled = function()

Returns dropEnabled as a boolean.

setDropEnabled

mxGraph.prototype.setDropEnabled = function( value )

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabled

Boolean indicating if the graph should allow dropping of cells into other cells.

isSplitEnabled

mxGraph.prototype.isSplitEnabled = function()

Returns splitEnabled as a boolean.

setSplitEnabled

mxGraph.prototype.setSplitEnabled = function( value )

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabled

Boolean indicating if the graph should allow dropping of cells into other cells.

isCellResizable

mxGraph.prototype.isCellResizable = function( cell )

Returns true if the given cell is resizable. This returns cellsResizable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_RESIZABLE to be 0.

Parameters

cell	mxCell whose resizable state should be returned.

isCellsResizable

mxGraph.prototype.isCellsResizable = function()

Returns cellsResizable.

setCellsResizable

mxGraph.prototype.setCellsResizable = function( value )

Specifies if the graph should allow resizing of cells. This implementation updates cellsResizable.

Parameters

value

Boolean indicating if the graph should allow resizing of cells.

isTerminalPointMovable

mxGraph.prototype.isTerminalPointMovable = function( cell,
source )

Returns true if the given terminal point is movable. This is independent from isCellConnectable and isCellDisconnectable and controls if terminal points can be moved in the graph if the edge is not connected. Note that it is required for this to return true to connect unconnected edges. This implementation returns true.

Parameters

cell	mxCell whose terminal point should be moved.
source	Boolean indicating if the source or target terminal should be moved.

isCellBendable

mxGraph.prototype.isCellBendable = function( cell )

Returns true if the given cell is bendable. This returns cellsBendable for all given cells if <isLocked> does not return true for the given cell and its style does not specify mxConstants.STYLE_BENDABLE to be 0.

Parameters

cell	mxCell whose bendable state should be returned.

isCellsBendable

mxGraph.prototype.isCellsBendable = function()

Returns <cellsBenadable>.

setCellsBendable

mxGraph.prototype.setCellsBendable = function( value )

Specifies if the graph should allow bending of edges. This implementation updates <bendable>.

Parameters

value

Boolean indicating if the graph should allow bending of edges.

isCellEditable

mxGraph.prototype.isCellEditable = function( cell )

Returns true if the given cell is editable. This returns cellsEditable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_EDITABLE to be 0.

Parameters

cell	mxCell whose editable state should be returned.

isCellsEditable

mxGraph.prototype.isCellsEditable = function()

Returns cellsEditable.

setCellsEditable

mxGraph.prototype.setCellsEditable = function( value )

Specifies if the graph should allow in-place editing for cell labels. This implementation updates cellsEditable.

Parameters

value

Boolean indicating if the graph should allow in-place editing.

isCellDisconnectable

mxGraph.prototype.isCellDisconnectable = function( cell,
terminal,
source )

Returns true if the given cell is disconnectable from the source or target terminal. This returns isCellsDisconnectable for all given cells if isCellLocked does not return true for the given cell.

Parameters

cell	mxCell whose disconnectable state should be returned.
terminal	mxCell that represents the source or target terminal.
source	Boolean indicating if the source or target terminal is to be disconnected.

isCellsDisconnectable

mxGraph.prototype.isCellsDisconnectable = function()

Returns cellsDisconnectable.

setCellsDisconnectable

mxGraph.prototype.setCellsDisconnectable = function( value )

Sets cellsDisconnectable.

isValidSource

mxGraph.prototype.isValidSource = function( cell )

Returns true if the given cell is a valid source for new connections. This implementation returns true for all non-null values and is called by is called by isValidConnection.

Parameters

cell	mxCell that represents a possible source or null.

isValidTarget

mxGraph.prototype.isValidTarget = function( cell )

Returns isValidSource for the given cell. This is called by isValidConnection.

Parameters

cell	mxCell that represents a possible target or null.

isValidConnection

mxGraph.prototype.isValidConnection = function( source,
target )

Returns true if the given target cell is a valid target for source. This is a boolean implementation for not allowing connections between certain pairs of vertices and is called by getEdgeValidationError. This implementation returns true if isValidSource returns true for the source and isValidTarget returns true for the target.

Parameters

source	mxCell that represents the source cell.
target	mxCell that represents the target cell.

setConnectable

mxGraph.prototype.setConnectable = function( connectable )

Specifies if the graph should allow new connections. This implementation updates mxConnectionHandler.enabled in <connectionHandler>.

Parameters

connectable

Boolean indicating if new connections should be allowed.

isConnectable

mxGraph.prototype.isConnectable = function()

Returns true if the <connectionHandler> is enabled.

setTooltips

mxGraph.prototype.setTooltips = function ( enabled )

Specifies if tooltips should be enabled. This implementation updates mxTooltipHandler.enabled in <tooltipHandler>.

Parameters

enabled

Boolean indicating if tooltips should be enabled.

setPanning

mxGraph.prototype.setPanning = function( enabled )

Specifies if panning should be enabled. This implementation updates mxPanningHandler.panningEnabled in <panningHandler>.

Parameters

enabled

Boolean indicating if panning should be enabled.

isEditing

mxGraph.prototype.isEditing = function( cell )

Returns true if the given cell is currently being edited. If no cell is specified then this returns true if any cell is currently being edited.

Parameters

cell	mxCell that should be checked.

isAutoSizeCell

mxGraph.prototype.isAutoSizeCell = function( cell )

Returns true if the size of the given cell should automatically be updated after a change of the label. This implementation returns autoSizeCells or checks if the cell style does specify mxConstants.STYLE_AUTOSIZE to be 1.

Parameters

cell	mxCell that should be resized.

isAutoSizeCells

mxGraph.prototype.isAutoSizeCells = function()

Returns autoSizeCells.

setAutoSizeCells

mxGraph.prototype.setAutoSizeCells = function( value )

Specifies if cell sizes should be automatically updated after a label change. This implementation sets autoSizeCells to the given parameter. To update the size of cells when the cells are added, set autoSizeCellsOnAdd to true.

Parameters

value

Boolean indicating if cells should be resized automatically.

isExtendParent

mxGraph.prototype.isExtendParent = function( cell )

Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent. This implementation returns isExtendParents if the cell is not an edge.

Parameters

cell	mxCell that has been resized.

isExtendParents

mxGraph.prototype.isExtendParents = function()

Returns extendParents.

setExtendParents

mxGraph.prototype.setExtendParents = function( value )

Sets extendParents.

Parameters

value

New boolean value for extendParents.

isExtendParentsOnAdd

mxGraph.prototype.isExtendParentsOnAdd = function( cell )

Returns extendParentsOnAdd.

setExtendParentsOnAdd

mxGraph.prototype.setExtendParentsOnAdd = function( value )

Sets extendParentsOnAdd.

Parameters

value

New boolean value for extendParentsOnAdd.

isExtendParentsOnMove

mxGraph.prototype.isExtendParentsOnMove = function()

Returns <extendParentsOnMove>.

setExtendParentsOnMove

mxGraph.prototype.setExtendParentsOnMove = function( value )

Sets <extendParentsOnMove>.

Parameters

value

New boolean value for extendParentsOnAdd.

isRecursiveResize

mxGraph.prototype.isRecursiveResize = function( state )

Returns recursiveResize.

Parameters

state

mxCellState that is being resized.

setRecursiveResize

mxGraph.prototype.setRecursiveResize = function( value )

Sets recursiveResize.

Parameters

value

New boolean value for recursiveResize.

isConstrainChild

mxGraph.prototype.isConstrainChild = function( cell )

Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent. This implementation returns false for all children of edges and isConstrainChildren otherwise.

Parameters

cell	mxCell that should be constrained.

isConstrainChildren

mxGraph.prototype.isConstrainChildren = function()

Returns constrainChildren.

setConstrainChildren

mxGraph.prototype.setConstrainChildren = function( value )

Sets constrainChildren.

isConstrainRelativeChildren

mxGraph.prototype.isConstrainRelativeChildren = function()

Returns constrainRelativeChildren.

setConstrainRelativeChildren

mxGraph.prototype.setConstrainRelativeChildren = function( value )

Sets constrainRelativeChildren.

isConstrainChildren

Returns allowNegativeCoordinates.

setConstrainChildren

Sets allowNegativeCoordinates.

getOverlap

mxGraph.prototype.getOverlap = function( cell )

Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent. A value of 0 means all children must stay inside the parent, 1 means the child is allowed to be placed outside of the parent such that it touches one of the parents sides. If isAllowOverlapParent returns false for the given cell, then this method returns 0.

Parameters

cell	mxCell for which the overlap ratio should be returned.

isAllowOverlapParent

mxGraph.prototype.isAllowOverlapParent = function( cell )

Returns true if the given cell is allowed to be placed outside of the parents area.

Parameters

cell	mxCell that represents the child to be checked.

getFoldableCells

mxGraph.prototype.getFoldableCells = function( cells,
collapse )

Returns the cells which are movable in the given array of cells.

isCellFoldable

mxGraph.prototype.isCellFoldable = function( cell,
collapse )

Returns true if the given cell is foldable. This implementation returns true if the cell has at least one child and its style does not specify mxConstants.STYLE_FOLDABLE to be 0.

Parameters

cell	mxCell whose foldable state should be returned.

isValidDropTarget

mxGraph.prototype.isValidDropTarget = function( cell,
cells,
evt )

Returns true if the given cell is a valid drop target for the specified cells. If splitEnabled is true then this returns isSplitTarget for the given arguments else it returns true if the cell is not collapsed and its child count is greater than 0.

Parameters

cell	mxCell that represents the possible drop target.
cells	mxCells that should be dropped into the target.
evt	Mouseevent that triggered the invocation.

isSplitTarget

mxGraph.prototype.isSplitTarget = function( target,
cells,
evt )

Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.

Parameters

target	mxCell that represents the edge to be splitted.
cells	mxCells that should split the edge.
evt	Mouseevent that triggered the invocation.

getDropTarget

mxGraph.prototype.getDropTarget = function( cells,
evt,
cell,
clone )

Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells. If the given array contains a swimlane and swimlaneNesting is false then this always returns null. If no cell is given, then the bottommost swimlane at the location of the given event is returned.

This function should only be used if isDropEnabled returns true.

Parameters

cells	Array of mxCells which are to be dropped onto the target.
evt	Mouseevent for the drag and drop.
cell	mxCell that is under the mousepointer.
clone	Optional boolean to indicate of cells will be cloned.

Cell retrieval

getDefaultParent

mxGraph.prototype.getDefaultParent = function()

Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null. The value returned by this function should be used as the parent for new cells (aka default layer).

setDefaultParent

mxGraph.prototype.setDefaultParent = function( cell )

Sets the defaultParent to the given cell. Set this to null to return the first child of the root in getDefaultParent.

getSwimlane

mxGraph.prototype.getSwimlane = function( cell )

Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.

Parameters

cell	mxCell for which the ancestor swimlane should be returned.

getSwimlaneAt

mxGraph.prototype.getSwimlaneAt = function ( x,
y,
parent )

Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

x	X-coordinate of the location to be checked.
y	Y-coordinate of the location to be checked.
parent	mxCell that should be used as the root of the recursion. Default is defaultParent.

getCellAt

mxGraph.prototype.getCellAt = function( x,
y,
parent,
vertices,
edges,
ignoreFn )

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent. This will also return swimlanes if the given location intersects the content area of the swimlane. If this is not desired, then the hitsSwimlaneContent may be used if the returned cell is a swimlane to determine if the location is inside the content area or on the actual title of the swimlane.

Parameters

x	X-coordinate of the location to be checked.
y	Y-coordinate of the location to be checked.
parent	mxCell that should be used as the root of the recursion. Default is current root of the view or the root of the model.
vertices	Optional boolean indicating if vertices should be returned. Default is true.
edges	Optional boolean indicating if edges should be returned. Default is true.
ignoreFn	Optional function that returns true if cell should be ignored. The function is passed the cell state and the x and y parameter.

intersects

mxGraph.prototype.intersects = function( state,
x,
y )

Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.

Parameters

state	mxCellState that represents the cell state.
x	X-coordinate of the location to be checked.
y	Y-coordinate of the location to be checked.

hitsSwimlaneContent

mxGraph.prototype.hitsSwimlaneContent = function( swimlane,
x,
y )

Returns true if the given coordinate pair is inside the content are of the given swimlane.

Parameters

swimlane	mxCell that specifies the swimlane.
x	X-coordinate of the mouse event.
y	Y-coordinate of the mouse event.

getChildVertices

mxGraph.prototype.getChildVertices = function( parent )

Returns the visible child vertices of the given parent.

Parameters

parent

mxCell whose children should be returned.

getChildEdges

mxGraph.prototype.getChildEdges = function( parent )

Returns the visible child edges of the given parent.

Parameters

parent

mxCell whose child vertices should be returned.

getChildCells

mxGraph.prototype.getChildCells = function( parent,
vertices,
edges )

Returns the visible child vertices or edges in the given parent. If vertices and edges is false, then all children are returned.

Parameters

parent	mxCell whose children should be returned.
vertices	Optional boolean that specifies if child vertices should be returned. Default is false.
edges	Optional boolean that specifies if child edges should be returned. Default is false.

getConnections

mxGraph.prototype.getConnections = function( cell,
parent )

Returns all visible edges connected to the given cell without loops.

Parameters

cell	mxCell whose connections should be returned.
parent	Optional parent of the opposite end for a connection to be returned.

getIncomingEdges

mxGraph.prototype.getIncomingEdges = function( cell,
parent )

Returns the visible incoming edges for the given cell. If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cell	mxCell whose incoming edges should be returned.
parent	Optional parent of the opposite end for an edge to be returned.

getOutgoingEdges

mxGraph.prototype.getOutgoingEdges = function( cell,
parent )

Returns the visible outgoing edges for the given cell. If the optional parent argument is specified, then only child edges of the given parent are returned.

Parameters

cell	mxCell whose outgoing edges should be returned.
parent	Optional parent of the opposite end for an edge to be returned.

getEdges

mxGraph.prototype.getEdges = function( cell,
parent,
incoming,
outgoing,
includeLoops,
recurse )

Returns the incoming and/or outgoing edges for the given cell. If the optional parent argument is specified, then only edges are returned where the opposite is in the given parent cell. If at least one of incoming or outgoing is true, then loops are ignored, if both are false, then all edges connected to the given cell are returned including loops.

Parameters

cell	mxCell whose edges should be returned.
parent	Optional parent of the opposite end for an edge to be returned.
incoming	Optional boolean that specifies if incoming edges should be included in the result. Default is true.
outgoing	Optional boolean that specifies if outgoing edges should be included in the result. Default is true.
includeLoops	Optional boolean that specifies if loops should be included in the result. Default is true.
recurse	Optional boolean the specifies if the parent specified only need be an ancestral parent, true, or the direct parent, false. Default is false

isValidAncestor

mxGraph.prototype.isValidAncestor = function( cell,
parent,
recurse )

Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.

Parameters

cell	mxCell the possible child cell
parent	mxCell the possible parent cell
recurse	boolean whether or not to recurse the child ancestors

getOpposites

mxGraph.prototype.getOpposites = function( edges,
terminal,
sources,
targets )

Returns all distinct visible opposite cells for the specified terminal on the given edges.

Parameters

edges	Array of mxCells that contains the edges whose opposite terminals should be returned.
terminal	Terminal that specifies the end whose opposite should be returned.
source	Optional boolean that specifies if source terminals should be included in the result. Default is true.
targets	Optional boolean that specifies if targer terminals should be included in the result. Default is true.

getEdgesBetween

mxGraph.prototype.getEdgesBetween = function( source,
target,
directed )

Returns the edges between the given source and target. This takes into account collapsed and invisible cells and returns the connected edges as displayed on the screen.

Parameters

source - target - directed -

getPointForEvent

mxGraph.prototype.getPointForEvent = function( evt,
addOffset )

Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.

Parameters

evt	Mousevent that contains the mouse pointer location.
addOffset	Optional boolean that specifies if the position should be offset by half of the gridSize. Default is true.

getCells

mxGraph.prototype.getCells = function( x,
y,
width,
height,
parent,
result )

Returns the child vertices and edges of the given parent that are contained in the given rectangle. The result is added to the optional result array, which is returned. If no result array is specified then a new array is created and returned.

Parameters

x	X-coordinate of the rectangle.
y	Y-coordinate of the rectangle.
width	Width of the rectangle.
height	Height of the rectangle.
parent	mxCell that should be used as the root of the recursion. Default is current root of the view or the root of the model.
result	Optional array to store the result in.

getCellsBeyond

mxGraph.prototype.getCellsBeyond = function( x0,
y0,
parent,
rightHalfpane,
bottomHalfpane )

Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.

Parameters

x0	X-coordinate of the origin.
y0	Y-coordinate of the origin.
parent	Optional mxCell whose children should be checked. Default is defaultParent.
rightHalfpane	Boolean indicating if the cells in the right halfpane from the origin should be returned.
bottomHalfpane	Boolean indicating if the cells in the bottom halfpane from the origin should be returned.

findTreeRoots

mxGraph.prototype.findTreeRoots = function( parent,
isolate,
invert )

Returns all children in the given parent which do not have incoming edges. If the result is empty then the with the greatest difference between incoming and outgoing edges is returned.

Parameters

parent	mxCell whose children should be checked.
isolate	Optional boolean that specifies if edges should be ignored if the opposite end is not a child of the given parent cell. Default is false.
invert	Optional boolean that specifies if outgoing or incoming edges should be counted for a tree root. If false then outgoing edges will be counted. Default is false.

traverse

mxGraph.prototype.traverse = function( vertex,
directed,
func,
edge,
visited,
inverse )

Example

mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
  mxLog.debug(graph.getLabel(vertex));
});

Parameters

vertex	mxCell that represents the vertex where the traversal starts.
directed	Optional boolean indicating if edges should only be traversed from source to target. Default is true.
func	Visitor function that takes the current vertex and the incoming edge as arguments. The traversal stops if the function returns false.
edge	Optional mxCell that represents the incoming edge. This is null for the first step of the traversal.
visited	Optional mxDictionary from cells to true for the visited cells.
inverse	Optional boolean to traverse in inverse direction. Default is false. This is ignored if directed is false.

Selection

isCellSelected

mxGraph.prototype.isCellSelected = function( cell )

Returns true if the given cell is selected.

Parameters

cell	mxCell for which the selection state should be returned.

isSelectionEmpty

mxGraph.prototype.isSelectionEmpty = function()

Returns true if the selection is empty.

clearSelection

mxGraph.prototype.clearSelection = function()

Clears the selection using mxGraphSelectionModel.clear.

getSelectionCount

mxGraph.prototype.getSelectionCount = function()

Returns the number of selected cells.

getSelectionCell

mxGraph.prototype.getSelectionCell = function()

Returns the first cell from the array of selected mxCells.

getSelectionCells

mxGraph.prototype.getSelectionCells = function()

Returns the array of selected mxCells.

setSelectionCell

mxGraph.prototype.setSelectionCell = function( cell )

Sets the selection cell.

Parameters

cell	mxCell to be selected.

setSelectionCells

mxGraph.prototype.setSelectionCells = function( cells )

Sets the selection cell.

Parameters

cells

Array of mxCells to be selected.

addSelectionCell

mxGraph.prototype.addSelectionCell = function( cell )

Adds the given cell to the selection.

Parameters

cell	mxCell to be add to the selection.

addSelectionCells

mxGraph.prototype.addSelectionCells = function( cells )

Adds the given cells to the selection.

Parameters

cells

Array of mxCells to be added to the selection.

removeSelectionCell

mxGraph.prototype.removeSelectionCell = function( cell )

Removes the given cell from the selection.

Parameters

cell	mxCell to be removed from the selection.

removeSelectionCells

mxGraph.prototype.removeSelectionCells = function( cells )

Removes the given cells from the selection.

Parameters

cells

Array of mxCells to be removed from the selection.

selectRegion

mxGraph.prototype.selectRegion = function( rect,
evt )

Selects and returns the cells inside the given rectangle for the specified event.

Parameters

rect	mxRectangle that represents the region to be selected.
evt	Mouseevent that triggered the selection.

selectNextCell

mxGraph.prototype.selectNextCell = function()

Selects the next cell.

selectPreviousCell

mxGraph.prototype.selectPreviousCell = function()

Selects the previous cell.

selectParentCell

mxGraph.prototype.selectParentCell = function()

Selects the parent cell.

selectChildCell

mxGraph.prototype.selectChildCell = function()

Selects the first child cell.

selectCell

mxGraph.prototype.selectCell = function( isNext,
isParent,
isChild )

Selects the next, parent, first child or previous cell, if all arguments are false.

Parameters

isNext	Boolean indicating if the next cell should be selected.
isParent	Boolean indicating if the parent cell should be selected.
isChild	Boolean indicating if the first child cell should be selected.

selectAll

mxGraph.prototype.selectAll = function( parent,
descendants )

Selects all children of the given parent cell or the children of the default parent if no parent is specified. To select leaf vertices and/or edges use selectCells.

Parameters

parent	Optional mxCell whose children should be selected. Default is defaultParent.
descendants	Optional boolean specifying whether all descendants should be selected. Default is false.

selectVertices

mxGraph.prototype.selectVertices = function( parent )

Select all vertices inside the given parent or the default parent.

selectVertices

Select all vertices inside the given parent or the default parent.

selectCells

mxGraph.prototype.selectCells = function( vertices,
edges,
parent )

Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified. Use selectAll to select all cells. For vertices, only cells with no children are selected.

Parameters

vertices	Boolean indicating if vertices should be selected.
edges	Boolean indicating if edges should be selected.
parent	Optional mxCell that acts as the root of the recursion. Default is defaultParent.

selectCellForEvent

mxGraph.prototype.selectCellForEvent = function( cell,
evt )

Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cell	mxCell to be selected.
evt	Optional mouseevent that triggered the selection.

selectCellsForEvent

mxGraph.prototype.selectCellsForEvent = function( cells,
evt )

Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.

Parameters

cells	Array of mxCells to be selected.
evt	Optional mouseevent that triggered the selection.

Selection state

createHandler

mxGraph.prototype.createHandler = function( state )

Creates a new handler for the given cell state. This implementation returns a new mxEdgeHandler of the corresponding cell is an edge, otherwise it returns an mxVertexHandler.

Parameters

state

mxCellState whose handler should be created.

createVertexHandler

mxGraph.prototype.createVertexHandler = function( state )

Hooks to create a new mxVertexHandler for the given mxCellState.

Parameters

state

mxCellState to create the handler for.

createEdgeHandler

mxGraph.prototype.createEdgeHandler = function( state,
edgeStyle )

Hooks to create a new mxEdgeHandler for the given mxCellState.

Parameters

state

mxCellState to create the handler for.

createEdgeSegmentHandler

mxGraph.prototype.createEdgeSegmentHandler = function( state )

Hooks to create a new <mxEdgeSegmentHandler> for the given mxCellState.

Parameters

state

mxCellState to create the handler for.

createElbowEdgeHandler

mxGraph.prototype.createElbowEdgeHandler = function( state )

Hooks to create a new mxElbowEdgeHandler for the given mxCellState.

Parameters

state

mxCellState to create the handler for.

Graph events

addMouseListener

mxGraph.prototype.addMouseListener = function( listener )

Adds a listener to the graph event dispatch loop. The listener must implement the mouseDown, mouseMove and mouseUp methods as shown in the mxMouseEvent class.

Parameters

listener

Listener to be added to the graph event listeners.

removeMouseListener

mxGraph.prototype.removeMouseListener = function( listener )

Removes the specified graph listener.

Parameters

listener

Listener to be removed from the graph event listeners.

updateMouseEvent

mxGraph.prototype.updateMouseEvent = function( me,
evtName )

Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.

Parameters

me	mxMouseEvent to be updated.
evtName	Name of the mouse event.

getStateForEvent

Returns the state for the given touch event.

isEventIgnored

mxGraph.prototype.isEventIgnored = function( evtName,
me,
sender )

Returns true if the event should be ignored in fireMouseEvent.

isSyntheticEventIgnored

mxGraph.prototype.isSyntheticEventIgnored = function( evtName,
me,
sender )

Hook for ignoring synthetic mouse events after touchend in Firefox.

isEventSourceIgnored

mxGraph.prototype.isEventSourceIgnored = function( evtName,
me )

Returns true if the event should be ignored in fireMouseEvent. This implementation returns true for select, option and input (if not of type checkbox, radio, button, submit or file) event sources if the event is not a mouse event or a left mouse button press event.

Parameters

evtName	The name of the event.
me	mxMouseEvent that should be ignored.

getEventState

mxGraph.prototype.getEventState = function( state )

Returns the mxCellState to be used when firing the mouse event for the given state. This implementation returns the given state.

Parameters

State whose event source should be returned.

fireMouseEvent

mxGraph.prototype.fireMouseEvent = function( evtName,
me,
sender )

Dispatches the given event in the graph event dispatch loop. Possible event names are mxEvent.MOUSE_DOWN, mxEvent.MOUSE_MOVE and mxEvent.MOUSE_UP. All listeners are invoked for all events regardless of the consumed state of the event.

Parameters

evtName	String that specifies the type of event to be dispatched.
me	mxMouseEvent to be fired.
sender	Optional sender argument. Default is this.

consumeMouseEvent

mxGraph.prototype.consumeMouseEvent = function( evtName,
me,
sender )

Consumes the given mxMouseEvent if it’s a touchStart event.

fireGestureEvent

mxGraph.prototype.fireGestureEvent = function( evt,
cell )

Dispatches a mxEvent.GESTURE event. The following example will resize the cell under the mouse based on the scale property of the native touch event.

graph.addListener(mxEvent.GESTURE, function(sender, eo)
{
  var evt = eo.getProperty('event');
  var state = graph.view.getState(eo.getProperty('cell'));

  if (graph.isEnabled() && graph.isCellResizable(state.cell) && Math.abs(1 - evt.scale) > 0.2)
  {
    var scale = graph.view.scale;
    var tr = graph.view.translate;

    var w = state.width * evt.scale;
    var h = state.height * evt.scale;
    var x = state.x - (w - state.width) / 2;
    var y = state.y - (h - state.height) / 2;

    var bounds = new mxRectangle(graph.snap(x / scale) - tr.x,
         graph.snap(y / scale) - tr.y, graph.snap(w / scale), graph.snap(h / scale));
    graph.resizeCell(state.cell, bounds);
    eo.consume();
  }
});

Parameters

evt	Gestureend event that represents the gesture.
cell	Optional mxCell associated with the gesture.

destroy

mxGraph.prototype.destroy = function()

Destroys the graph and all its resources.

mxCellOverlay

Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip. Overlays can handle and fire <click> events and are added to the graph using mxGraph.addCellOverlay, and removed using mxGraph.removeCellOverlay, or mxGraph.removeCellOverlays to remove all overlays. The mxGraph.getCellOverlays function returns the array of overlays for a given cell in a graph. If multiple overlays exist for the same cell, then getBounds should be overridden in at least one of the overlays.

Overlays appear on top of all cells in a special layer. If this is not desirable, then the image must be rendered as part of the shape or label of the cell instead.

Example

The following adds a new overlays for a given vertex and selects the cell if the overlay is clicked.

var overlay = new mxCellOverlay(img, html);
graph.addCellOverlay(vertex, overlay);
overlay.addListener(mxEvent.CLICK, function(sender, evt)
{
  var cell = evt.getProperty('cell');
  graph.setSelectionCell(cell);
});

For cell overlays to be printed use mxPrintPreview.printOverlays.

Summary

Events
mxEvent.CLICK	Fires when the user clicks on the overlay.
Functions
mxCellOverlay	Constructs a new overlay using the given image and tooltip.
Variables
image	Holds the mxImage to be used as the icon.
tooltip	Holds the optional string to be used as the tooltip.
align	Holds the horizontal alignment for the overlay.
verticalAlign	Holds the vertical alignment for the overlay.
offset	Holds the offset as an mxPoint.
cursor	Holds the cursor for the overlay.
defaultOverlap	Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment.
Functions
getBounds	Returns the bounds of the overlay for the given mxCellState as an mxRectangle.
toString	Returns the textual representation of the overlay to be used as the tooltip.

Events

mxEvent.CLICK

Fires when the user clicks on the overlay. The <code>event</code> property contains the corresponding mouse event and the <code>cell</code> property contains the cell. For touch devices this is fired if the element receives a touchend event.

Functions

mxCellOverlay

function mxCellOverlay( image,
tooltip,
align,
verticalAlign,
offset,
cursor )

Constructs a new overlay using the given image and tooltip.

Parameters

image	mxImage that represents the icon to be displayed.
tooltip	Optional string that specifies the tooltip.
align	Optional horizontal alignment for the overlay. Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default).
verticalAlign	Vertical alignment for the overlay. Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default).

Variables

image

mxCellOverlay.prototype.image

Holds the mxImage to be used as the icon.

tooltip

mxCellOverlay.prototype.tooltip

Holds the optional string to be used as the tooltip.

align

mxCellOverlay.prototype.align

Holds the horizontal alignment for the overlay. Default is mxConstants.ALIGN_RIGHT. For edges, the overlay always appears in the center of the edge.

verticalAlign

mxCellOverlay.prototype.verticalAlign

Holds the vertical alignment for the overlay. Default is mxConstants.ALIGN_BOTTOM. For edges, the overlay always appears in the center of the edge.

offset

mxCellOverlay.prototype.offset

Holds the offset as an mxPoint. The offset will be scaled according to the current scale.

cursor

mxCellOverlay.prototype.cursor

Holds the cursor for the overlay. Default is ‘help’.

defaultOverlap

mxCellOverlay.prototype.defaultOverlap

Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment. Default is 0.5.

Functions

getBounds

mxCellOverlay.prototype.getBounds = function( state )

Returns the bounds of the overlay for the given mxCellState as an mxRectangle. This should be overridden when using multiple overlays per cell so that the overlays do not overlap.

The following example will place the overlay along an edge (where x=[-1..1] from the start to the end of the edge and y is the orthogonal offset in px).

overlay.getBounds = function(state)
{
  var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments);

  if (state.view.graph.getModel().isEdge(state.cell))
  {
    var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true});

    bounds.x = pt.x - bounds.width / 2;
    bounds.y = pt.y - bounds.height / 2;
  }

  return bounds;
};

Parameters

state

mxCellState that represents the current state of the associated cell.

toString

mxCellOverlay.prototype.toString = function()

Returns the textual representation of the overlay to be used as the tooltip. This implementation returns tooltip.

mxOutline

Implements an outline (aka overview) for a graph. Set updateOnPan to true to enable updates while the source graph is panning.

Example

var outline = new mxOutline(graph, div);

If an outline is used in an mxWindow in IE8 standards mode, the following code makes sure that the shadow filter is not inherited and that any transparent elements in the graph do not show the page background, but the background of the graph container.

if (document.documentMode == 8)
{
  container.style.filter = 'progid:DXImageTransform.Microsoft.alpha(opacity=100)';
}

To move the graph to the top, left corner the following code can be used.

var scale = graph.view.scale;
var bounds = graph.getGraphBounds();
graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale);

To toggle the suspended mode, the following can be used.

outline.suspended = !outln.suspended;
if (!outline.suspended)
{
  outline.update(true);
}

Summary

Functions
mxOutline	Constructs a new outline for the specified graph inside the given container.
source	Reference to the source mxGraph.
outline	Reference to the mxGraph that renders the outline.
graphRenderHint	Renderhint to be used for the outline graph.
Variables
enabled	Specifies if events are handled.
showViewport	Specifies a viewport rectangle should be shown.
border	Border to be added at the bottom and right.
enabled	Specifies the size of the sizer handler.
labelsVisible	Specifies if labels should be visible in the outline.
updateOnPan	Specifies if update should be called for mxEvent.PAN in the source graph.
sizerImage	Optional mxImage to be used for the sizer.
minScale	Minimum scale to be used.
suspended	Optional boolean flag to suspend updates.
forceVmlHandles	Specifies if VML should be used to render the handles in this control.
Functions
createGraph	Creates the mxGraph used in the outline.
init	Initializes the outline inside the given container.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
setZoomEnabled	Enables or disables the zoom handling by showing or hiding the respective handle.
refresh	Invokes update and revalidate the outline.
createSizer	Creates the shape used as the sizer.
getSourceContainerSize	Returns the size of the source container.
getOutlineOffset	Returns the offset for drawing the outline graph.
getOutlineOffset	Returns the offset for drawing the outline graph.
update	Updates the outline.
mouseDown	Handles the event by starting a translation or zoom.
mouseMove	Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.
getTranslateForEvent	Gets the translate for the given mouse event.
mouseUp	Handles the event by applying the translation or zoom to <graph>.
destroy	Destroy this outline and removes all listeners from source.

Functions

mxOutline

function mxOutline( source,
container )

Constructs a new outline for the specified graph inside the given container.

Parameters

source	mxGraph to create the outline for.
container	DOM node that will contain the outline.

source

Reference to the source mxGraph.

outline

Reference to the mxGraph that renders the outline.

graphRenderHint

Renderhint to be used for the outline graph. Default is faster.

Variables

enabled

mxOutline.prototype.enabled

Specifies if events are handled. Default is true.

showViewport

mxOutline.prototype.showViewport

Specifies a viewport rectangle should be shown. Default is true.

border

mxOutline.prototype.border

Border to be added at the bottom and right. Default is 10.

enabled

Specifies the size of the sizer handler. Default is 8.

labelsVisible

mxOutline.prototype.labelsVisible

Specifies if labels should be visible in the outline. Default is false.

updateOnPan

mxOutline.prototype.updateOnPan

Specifies if update should be called for mxEvent.PAN in the source graph. Default is false.

sizerImage

mxOutline.prototype.sizerImage

Optional mxImage to be used for the sizer. Default is null.

minScale

mxOutline.prototype.minScale

Minimum scale to be used. Default is 0.001.

suspended

mxOutline.prototype.suspended

Optional boolean flag to suspend updates. Default is false. This flag will also suspend repaints of the outline. To toggle this switch, use the following code.

nav.suspended = !nav.suspended;

if (!nav.suspended)
{
  nav.update(true);
}

forceVmlHandles

mxOutline.prototype.forceVmlHandles

Specifies if VML should be used to render the handles in this control. This is true for IE8 standards mode and false for all other browsers and modes. This is a workaround for rendering issues of HTML elements over elements with filters in IE 8 standards mode.

Functions

createGraph

mxOutline.prototype.createGraph = function( container )

Creates the mxGraph used in the outline.

init

mxOutline.prototype.init = function( container )

Initializes the outline inside the given container.

isEnabled

mxOutline.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxOutline.prototype.setEnabled = function( value )

Enables or disables event handling. This implementation updates enabled.

Parameters

value

Boolean that specifies the new enabled state.

setZoomEnabled

mxOutline.prototype.setZoomEnabled = function( value )

Enables or disables the zoom handling by showing or hiding the respective handle.

Parameters

value

Boolean that specifies the new enabled state.

refresh

mxOutline.prototype.refresh = function()

Invokes update and revalidate the outline. This method is deprecated.

createSizer

mxOutline.prototype.createSizer = function()

Creates the shape used as the sizer.

getSourceContainerSize

mxOutline.prototype.getSourceContainerSize = function()

Returns the size of the source container.

getOutlineOffset

mxOutline.prototype.getOutlineOffset = function( scale )

Returns the offset for drawing the outline graph.

getOutlineOffset

Returns the offset for drawing the outline graph.

update

mxOutline.prototype.update = function( revalidate )

Updates the outline.

mouseDown

mxOutline.prototype.mouseDown = function( sender,
me )

Handles the event by starting a translation or zoom.

mouseMove

mxOutline.prototype.mouseMove = function( sender,
me )

Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.

getTranslateForEvent

mxOutline.prototype.getTranslateForEvent = function( me )

Gets the translate for the given mouse event. Here is an example to limit the outline to stay within positive coordinates:

outline.getTranslateForEvent = function(me)
{
  var pt = new mxPoint(me.getX() - this.startX, me.getY() - this.startY);

  if (!this.zoom)
  {
    var tr = this.source.view.translate;
    pt.x = Math.max(tr.x * this.outline.view.scale, pt.x);
    pt.y = Math.max(tr.y * this.outline.view.scale, pt.y);
  }

  return pt;
};

mouseUp

mxOutline.prototype.mouseUp = function( sender,
me )

Handles the event by applying the translation or zoom to <graph>.

destroy

mxOutline.prototype.destroy = function()

Destroy this outline and removes all listeners from source.

mxMultiplicity

Defines invalid connections along with the error messages that they produce. To add or remove rules on a graph, you must add/remove instances of this class to mxGraph.multiplicities.

Example

graph.multiplicities.push(new mxMultiplicity(
  true, 'rectangle', null, null, 0, 2, ['circle'],
  'Only 2 targets allowed',
  'Only circle targets allowed'));

Defines a rule where each rectangle must be connected to no more than 2 circles and no other types of targets are allowed.

Summary

Functions
mxMultiplicity	Instantiate class mxMultiplicity in order to describe allowed connections in a graph.
Variables
type	Defines the type of the source or target terminal.
attr	Optional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.
value	Optional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.
source	Boolean that specifies if the rule is applied to the source or target terminal of an edge.
min	Defines the minimum number of connections for which this rule applies.
max	Defines the maximum number of connections for which this rule applies.
validNeighbors	Holds an array of strings that specify the type of neighbor for which this rule applies.
validNeighborsAllowed	Boolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.
countError	Holds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.
typeError	Holds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.
Functions
check	Checks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.
checkNeighbors	Checks if there are any valid neighbours in validNeighbors.
checkTerminal	Checks the given terminal cell and returns true if this rule applies.
checkType	Checks the type of the given value.

Functions

mxMultiplicity

function mxMultiplicity( source,
type,
attr,
value,
min,
max,
validNeighbors,
countError,
typeError,
validNeighborsAllowed )

Instantiate class mxMultiplicity in order to describe allowed connections in a graph. Not all constraints can be enforced while editing, some must be checked at validation time. The countError and typeError are treated as resource keys in mxResources.

Parameters

source	Boolean indicating if this rule applies to the source or target terminal.
type	Type of the source or target terminal that this rule applies to. See type for more information.
attr	Optional attribute name to match the source or target terminal.
value	Optional attribute value to match the source or target terminal.
min	Minimum number of edges for this rule. Default is 1.
max	Maximum number of edges for this rule. n means infinite. Default is n.
validNeighbors	Array of types of the opposite terminal for which this rule applies.
countError	Error to be displayed for invalid number of edges.
typeError	Error to be displayed for invalid opposite terminals.
validNeighborsAllowed	Optional boolean indicating if the array of opposite types should be valid or invalid.

Variables

type

mxMultiplicity.prototype.type

Defines the type of the source or target terminal. The type is a string passed to mxUtils.isNode together with the source or target vertex value as the first argument.

attr

mxMultiplicity.prototype.attr

Optional string that specifies the attributename to be passed to mxUtils.isNode to check if the rule applies to a cell.

value

mxMultiplicity.prototype.value

Optional string that specifies the value of the attribute to be passed to mxUtils.isNode to check if the rule applies to a cell.

source

mxMultiplicity.prototype.source

Boolean that specifies if the rule is applied to the source or target terminal of an edge.

min

mxMultiplicity.prototype.min

Defines the minimum number of connections for which this rule applies. Default is 0.

max

mxMultiplicity.prototype.max

Defines the maximum number of connections for which this rule applies. A value of ‘n’ means unlimited times. Default is ‘n’.

validNeighbors

mxMultiplicity.prototype.validNeighbors

Holds an array of strings that specify the type of neighbor for which this rule applies. The strings are used in <mxCell.is> on the opposite terminal to check if the rule applies to the connection.

validNeighborsAllowed

mxMultiplicity.prototype.validNeighborsAllowed

Boolean indicating if the list of validNeighbors are those that are allowed for this rule or those that are not allowed for this rule.

countError

mxMultiplicity.prototype.countError

Holds the localized error message to be displayed if the number of connections for which the rule applies is smaller than min or greater than max.

typeError

mxMultiplicity.prototype.typeError

Holds the localized error message to be displayed if the type of the neighbor for a connection does not match the rule.

Functions

check

mxMultiplicity.prototype.check = function( graph,
edge,
source,
target,
sourceOut,
targetIn )

Checks the multiplicity for the given arguments and returns the error for the given connection or null if the multiplicity does not apply.

Parameters

graph	Reference to the enclosing mxGraph instance.
edge	mxCell that represents the edge to validate.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
sourceOut	Number of outgoing edges from the source terminal.
targetIn	Number of incoming edges for the target terminal.

checkNeighbors

mxMultiplicity.prototype.checkNeighbors = function( graph,
edge,
source,
target )

Checks if there are any valid neighbours in validNeighbors. This is only called if validNeighbors is a non-empty array.

checkTerminal

mxMultiplicity.prototype.checkTerminal = function( graph,
terminal,
edge )

Checks the given terminal cell and returns true if this rule applies. The given cell is the source or target of the given edge, depending on source. This implementation uses checkType on the terminal’s value.

checkType

mxMultiplicity.prototype.checkType = function( graph,
value,
type,
attr,
attrValue )

Checks the type of the given value.

mxLayoutManager

Implements a layout manager that runs a given layout after any changes to the graph

Example

var layoutMgr = new mxLayoutManager(graph);
layoutMgr.getLayout = function(cell)
{
  return layout;
};

Summary

Events
mxEvent.LAYOUT_CELLS	Fires between begin- and endUpdate after all cells have been layouted in layoutCells.
Functions
mxLayoutManager	Constructs a new automatic layout for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
bubbling	Specifies if the layout should bubble along the cell hierarchy.
enabled	Specifies if event handling is enabled.
updateHandler	Holds the function that handles the endUpdate event.
moveHandler	Holds the function that handles the move event.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isBubbling	Returns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed.
setBubbling	Sets bubbling.
getGraph	Returns the graph that this layout operates on.
setGraph	Sets the graph that the layouts operate on.
getLayout	Returns the layout to be executed for the given graph and parent.
beforeUndo	Called from the undoHandler.
executeLayout	Executes the given layout on the given parent.
cellsMoved	Called from the moveHandler.
getCellsForEdit	Returns the cells to be layouted for the given sequence of changes.
getCellsForChange	Executes all layouts which have been scheduled during the changes.
layoutCells	Executes all layouts which have been scheduled during the changes.
executeLayout	Executes the given layout on the given parent.
destroy	Removes all handlers from the graph and deletes the reference to it.

Events

mxEvent.LAYOUT_CELLS

Fires between begin- and endUpdate after all cells have been layouted in layoutCells. The <code>cells</code> property contains all cells that have been passed to layoutCells.

Functions

mxLayoutManager

function mxLayoutManager( graph )

Constructs a new automatic layout for the given graph.

Arguments

graph

Reference to the enclosing graph.

Variables

graph

mxLayoutManager.prototype.graph

Reference to the enclosing mxGraph.

bubbling

mxLayoutManager.prototype.bubbling

Specifies if the layout should bubble along the cell hierarchy. Default is true.

enabled

mxLayoutManager.prototype.enabled

Specifies if event handling is enabled. Default is true.

updateHandler

mxLayoutManager.prototype.updateHandler

Holds the function that handles the endUpdate event.

moveHandler

mxLayoutManager.prototype.moveHandler

Holds the function that handles the move event.

Functions

isEnabled

mxLayoutManager.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxLayoutManager.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

isBubbling

mxLayoutManager.prototype.isBubbling = function()

Returns true if a layout should bubble, that is, if the parent layout should be executed whenever a cell layout (layout of the children of a cell) has been executed. This implementation returns bubbling.

setBubbling

mxLayoutManager.prototype.setBubbling = function( value )

Sets bubbling.

getGraph

mxLayoutManager.prototype.getGraph = function()

Returns the graph that this layout operates on.

setGraph

mxLayoutManager.prototype.setGraph = function( graph )

Sets the graph that the layouts operate on.

getLayout

mxLayoutManager.prototype.getLayout = function( parent )

Returns the layout to be executed for the given graph and parent.

beforeUndo

mxLayoutManager.prototype.beforeUndo = function( undoableEdit )

Called from the undoHandler.

Parameters

cell	Array of mxCells that have been moved.
evt	Mouse event that represents the mousedown.

executeLayout

mxLayoutManager.prototype.executeLayoutForCells = function( cells )

Executes the given layout on the given parent.

cellsMoved

mxLayoutManager.prototype.cellsMoved = function( cells,
evt )

Called from the moveHandler.

Parameters

cell	Array of mxCells that have been moved.
evt	Mouse event that represents the mousedown.

getCellsForEdit

Returns the cells to be layouted for the given sequence of changes.

getCellsForChange

mxLayoutManager.prototype.getCellsForChange = function( change )

Executes all layouts which have been scheduled during the changes.

layoutCells

mxLayoutManager.prototype.layoutCells = function( cells )

Executes all layouts which have been scheduled during the changes.

executeLayout

mxLayoutManager.prototype.executeLayout = function( layout,
parent )

Executes the given layout on the given parent.

destroy

mxLayoutManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxSwimlaneManager

Manager for swimlanes and nested swimlanes that sets the size of newly added swimlanes to that of their siblings, and propagates changes to the size of a swimlane to its siblings, if <siblings> is true, and its ancestors, if <bubbling> is true.

Summary

Functions
mxSwimlaneManager	Constructs a new swimlane manager for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
enabled	Specifies if event handling is enabled.
horizontal	Specifies the orientation of the swimlanes.
addEnabled	Specifies if newly added cells should be resized to match the size of their existing siblings.
resizeEnabled	Specifies if resizing of swimlanes should be handled.
moveHandler	Holds the function that handles the move event.
moveHandler	Holds the function that handles the move event.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isHorizontal	Returns horizontal.
setHorizontal	Sets horizontal.
isAddEnabled	Returns addEnabled.
setAddEnabled	Sets addEnabled.
isResizeEnabled	Returns resizeEnabled.
setResizeEnabled	Sets resizeEnabled.
getGraph	Returns the graph that this manager operates on.
setGraph	Sets the graph that the manager operates on.
isSwimlaneIgnored	Returns true if the given swimlane should be ignored.
isCellHorizontal	Returns true if the given cell is horizontal.
cellsAdded	Called if any cells have been added.
swimlaneAdded	Updates the size of the given swimlane to match that of any existing siblings swimlanes.
cellsResized	Called if any cells have been resizes.
resizeSwimlane	Called from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.
destroy	Removes all handlers from the graph and deletes the reference to it.

Functions

mxSwimlaneManager

function mxSwimlaneManager( graph,
horizontal,
addEnabled,
resizeEnabled )

Constructs a new swimlane manager for the given graph.

Arguments

graph

Reference to the enclosing graph.

Variables

graph

mxSwimlaneManager.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxSwimlaneManager.prototype.enabled

Specifies if event handling is enabled. Default is true.

horizontal

mxSwimlaneManager.prototype.horizontal

Specifies the orientation of the swimlanes. Default is true.

addEnabled

mxSwimlaneManager.prototype.addEnabled

Specifies if newly added cells should be resized to match the size of their existing siblings. Default is true.

resizeEnabled

mxSwimlaneManager.prototype.resizeEnabled

Specifies if resizing of swimlanes should be handled. Default is true.

moveHandler

Holds the function that handles the move event.

moveHandler

Holds the function that handles the move event.

Functions

isEnabled

mxSwimlaneManager.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxSwimlaneManager.prototype.setEnabled = function( value )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

isHorizontal

mxSwimlaneManager.prototype.isHorizontal = function()

Returns horizontal.

setHorizontal

mxSwimlaneManager.prototype.setHorizontal = function( value )

Sets horizontal.

isAddEnabled

mxSwimlaneManager.prototype.isAddEnabled = function()

Returns addEnabled.

setAddEnabled

mxSwimlaneManager.prototype.setAddEnabled = function( value )

Sets addEnabled.

isResizeEnabled

mxSwimlaneManager.prototype.isResizeEnabled = function()

Returns resizeEnabled.

setResizeEnabled

mxSwimlaneManager.prototype.setResizeEnabled = function( value )

Sets resizeEnabled.

getGraph

mxSwimlaneManager.prototype.getGraph = function()

Returns the graph that this manager operates on.

setGraph

mxSwimlaneManager.prototype.setGraph = function( graph )

Sets the graph that the manager operates on.

isSwimlaneIgnored

mxSwimlaneManager.prototype.isSwimlaneIgnored = function( swimlane )

Returns true if the given swimlane should be ignored.

isCellHorizontal

mxSwimlaneManager.prototype.isCellHorizontal = function( cell )

Returns true if the given cell is horizontal. If the given cell is not a swimlane, then the global orientation is returned.

cellsAdded

mxSwimlaneManager.prototype.cellsAdded = function( cells )

Called if any cells have been added.

Parameters

cell	Array of mxCells that have been added.

swimlaneAdded

mxSwimlaneManager.prototype.swimlaneAdded = function( swimlane )

Updates the size of the given swimlane to match that of any existing siblings swimlanes.

Parameters

swimlane

mxCell that represents the new swimlane.

cellsResized

mxSwimlaneManager.prototype.cellsResized = function( cells )

Called if any cells have been resizes. Calls <swimlaneResized> for all swimlanes where isSwimlaneIgnored returns false.

Parameters

cells

Array of mxCells whose size was changed.

resizeSwimlane

mxSwimlaneManager.prototype.resizeSwimlane = function( swimlane,
w,
h,
parentHorizontal )

Called from cellsResized for all swimlanes that are not ignored to update the size of the siblings and the size of the parent swimlanes, recursively, if <bubbling> is true.

Parameters

swimlane

mxCell whose size has changed.

destroy

mxSwimlaneManager.prototype.destroy = function()

Removes all handlers from the graph and deletes the reference to it.

mxTemporaryCellStates

Creates a temporary set of cell states.

Summary

Variables
view	Holds the width of the rectangle.
oldStates	Holds the height of the rectangle.
oldBounds	Holds the height of the rectangle.
oldScale	Holds the height of the rectangle.
Functions
destroy	Returns the top, left corner as a new mxPoint.

Variables

view

mxTemporaryCellStates.prototype.view

Holds the width of the rectangle. Default is 0.

oldStates

mxTemporaryCellStates.prototype.oldStates

Holds the height of the rectangle. Default is 0.

oldBounds

mxTemporaryCellStates.prototype.oldBounds

Holds the height of the rectangle. Default is 0.

oldScale

mxTemporaryCellStates.prototype.oldScale

Holds the height of the rectangle. Default is 0.

Functions

destroy

mxTemporaryCellStates.prototype.destroy = function()

Returns the top, left corner as a new mxPoint.

mxCellStatePreview

Implements a live preview for moving cells.

Summary

Functions
mxCellStatePreview	Constructs a move preview for the given graph.
Variables
graph	Reference to the enclosing mxGraph.
deltas	Reference to the enclosing mxGraph.
count	Contains the number of entries in the map.
Functions
isEmpty	Returns true if this contains no entries.
moveState
show
translateState
revalidateState
addEdges

Functions

mxCellStatePreview

function mxCellStatePreview( graph )

Constructs a move preview for the given graph.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

graph

mxCellStatePreview.prototype.graph

Reference to the enclosing mxGraph.

deltas

mxCellStatePreview.prototype.deltas

Reference to the enclosing mxGraph.

count

mxCellStatePreview.prototype.count

Contains the number of entries in the map.

Functions

isEmpty

mxCellStatePreview.prototype.isEmpty = function()

Returns true if this contains no entries.

moveState

mxCellStatePreview.prototype.moveState = function( state,
dx,
dy,
add,
includeEdges )

show

mxCellStatePreview.prototype.show = function( visitor )

translateState

mxCellStatePreview.prototype.translateState = function( state,
dx,
dy )

revalidateState

mxCellStatePreview.prototype.revalidateState = function( state,
dx,
dy,
visitor )

addEdges

mxCellStatePreview.prototype.addEdges = function( state )

mxConnectionConstraint

Defines an object that contains the constraints about how to connect one side of an edge to its terminal.

Summary

Functions
mxConnectionConstraint	Constructs a new connection constraint for the given point and boolean arguments.
Variables
point	mxPoint that specifies the fixed location of the connection point.
perimeter	Boolean that specifies if the point should be projected onto the perimeter of the terminal.
name	Optional string that specifies the name of the constraint.
dx	Optional float that specifies the horizontal offset of the constraint.
dy	Optional float that specifies the vertical offset of the constraint.

Functions

mxConnectionConstraint

function mxConnectionConstraint( point,
perimeter,
name,
dx,
dy )

Constructs a new connection constraint for the given point and boolean arguments.

Parameters

point	Optional mxPoint that specifies the fixed location of the point in relative coordinates. Default is null.
perimeter	Optional boolean that specifies if the fixed point should be projected onto the perimeter of the terminal. Default is true.

Variables

point

mxConnectionConstraint.prototype.point

mxPoint that specifies the fixed location of the connection point.

perimeter

mxConnectionConstraint.prototype.perimeter

Boolean that specifies if the point should be projected onto the perimeter of the terminal.

name

mxConnectionConstraint.prototype.name

Optional string that specifies the name of the constraint.

dx

mxConnectionConstraint.prototype.dx

Optional float that specifies the horizontal offset of the constraint.

dy

mxConnectionConstraint.prototype.dy

Optional float that specifies the vertical offset of the constraint.

mxGraphHandler

Graph event handler that handles selection. Individual cells are handled separately using mxVertexHandler or one of the edge handlers. These handlers are created using mxGraph.createHandler in mxGraphSelectionModel.cellAdded.

To avoid the container to scroll a moved cell into view, set <scrollAfterMove> to false.

Summary

Functions
mxGraphHandler	Constructs an event handler that creates handles for the selection cells.
Variables
graph	Reference to the enclosing mxGraph.
maxCells	Defines the maximum number of cells to paint subhandles for.
enabled	Specifies if events are handled.
highlightEnabled	Specifies if drop targets under the mouse should be enabled.
cloneEnabled	Specifies if cloning by control-drag is enabled.
moveEnabled	Specifies if moving is enabled.
guidesEnabled	Specifies if other cells should be used for snapping the right, center or left side of the current selection.
guide	Holds the mxGuide instance that is used for alignment.
currentDx	Stores the x-coordinate of the current mouse move.
currentDy	Stores the y-coordinate of the current mouse move.
updateCursor	Specifies if a move cursor should be shown if the mouse is over a movable cell.
selectEnabled	Specifies if selecting is enabled.
removeCellsFromParent	Specifies if cells may be moved out of their parents.
removeEmptyParents	If empty parents should be removed from the model after all child cells have been moved out.
connectOnDrop	Specifies if drop events are interpreted as new connections if no other drop action is defined.
scrollOnMove	Specifies if the view should be scrolled so that a moved cell is visible.
minimumSize	Specifies the minimum number of pixels for the width and height of a selection border.
previewColor	Specifies the color of the preview shape.
htmlPreview	Specifies if the graph container should be used for preview.
shape	Reference to the mxShape that represents the preview.
scaleGrid	Specifies if the grid should be scaled.
rotationEnabled	Specifies if the bounding box should allow for rotation.
Functions
isEnabled	Returns enabled.
setEnabled	Sets enabled.
isCloneEnabled	Returns cloneEnabled.
setCloneEnabled	Sets cloneEnabled.
isMoveEnabled	Returns moveEnabled.
setMoveEnabled	Sets moveEnabled.
isSelectEnabled	Returns selectEnabled.
setSelectEnabled	Sets selectEnabled.
isRemoveCellsFromParent	Returns removeCellsFromParent.
setRemoveCellsFromParent	Sets removeCellsFromParent.
getInitialCellForEvent	Hook to return initial cell for the given event.
isDelayedSelection	Hook to return true for delayed selections.
consumeMouseEvent	Consumes the given mouse event.
mouseDown	Handles the event by selecing the given cell and creating a handle for it.
getGuideStates	Creates an array of cell states which should be used as guides.
getCells	Returns the cells to be modified by this handler.
getPreviewBounds	Returns the mxRectangle used as the preview bounds for moving the given cells.
getBoundingBox	Returns the union of the mxCellStates for the given array of mxCells.
createPreviewShape	Creates the shape used to draw the preview for the given bounds.
start	Starts the handling of the mouse gesture.
useGuidesForEvent	Returns true if the guides should be used for the given mxMouseEvent.
snap	Snaps the given vector to the grid and returns the given mxPoint instance.
getDelta	Returns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundLength	Hook for rounding the unscaled vector.
mouseMove	Handles the event by highlighting possible drop targets and updating the preview.
updatePreviewShape	Updates the bounds of the preview shape.
setHighlightColor	Sets the color of the rectangle used to highlight drop targets.
mouseUp	Handles the event by applying the changes to the selection cells.
selectDelayed	Implements the delayed selection for the given mouse event.
reset	Resets the state of this handler.
shouldRemoveCellsFromParent	Returns true if the given cells should be removed from the parent for the specified mousereleased event.
moveCells	Moves the given cells by the specified amount.
moveCells	Moves the given cells by the specified amount.
destroyShapes	Destroy the preview and highlight shapes.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxGraphHandler

function mxGraphHandler( graph )

Constructs an event handler that creates handles for the selection cells.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

graph

mxGraphHandler.prototype.graph

Reference to the enclosing mxGraph.

maxCells

mxGraphHandler.prototype.maxCells

Defines the maximum number of cells to paint subhandles for. Default is 50 for Firefox and 20 for IE. Set this to 0 if you want an unlimited number of handles to be displayed. This is only recommended if the number of cells in the graph is limited to a small number, eg. 500.

enabled

mxGraphHandler.prototype.enabled

Specifies if events are handled. Default is true.

highlightEnabled

mxGraphHandler.prototype.highlightEnabled

Specifies if drop targets under the mouse should be enabled. Default is true.

cloneEnabled

mxGraphHandler.prototype.cloneEnabled

Specifies if cloning by control-drag is enabled. Default is true.

moveEnabled

mxGraphHandler.prototype.moveEnabled

Specifies if moving is enabled. Default is true.

guidesEnabled

mxGraphHandler.prototype.guidesEnabled

Specifies if other cells should be used for snapping the right, center or left side of the current selection. Default is false.

guide

mxGraphHandler.prototype.guide

Holds the mxGuide instance that is used for alignment.

currentDx

mxGraphHandler.prototype.currentDx

Stores the x-coordinate of the current mouse move.

currentDy

mxGraphHandler.prototype.currentDy

Stores the y-coordinate of the current mouse move.

updateCursor

mxGraphHandler.prototype.updateCursor

Specifies if a move cursor should be shown if the mouse is over a movable cell. Default is true.

selectEnabled

mxGraphHandler.prototype.selectEnabled

Specifies if selecting is enabled. Default is true.

removeCellsFromParent

mxGraphHandler.prototype.removeCellsFromParent

Specifies if cells may be moved out of their parents. Default is true.

removeEmptyParents

mxGraphHandler.prototype.removeEmptyParents

If empty parents should be removed from the model after all child cells have been moved out. Default is true.

connectOnDrop

mxGraphHandler.prototype.connectOnDrop

Specifies if drop events are interpreted as new connections if no other drop action is defined. Default is false.

scrollOnMove

mxGraphHandler.prototype.scrollOnMove

Specifies if the view should be scrolled so that a moved cell is visible. Default is true.

minimumSize

mxGraphHandler.prototype.minimumSize

Specifies the minimum number of pixels for the width and height of a selection border. Default is 6.

previewColor

mxGraphHandler.prototype.previewColor

Specifies the color of the preview shape. Default is black.

htmlPreview

mxGraphHandler.prototype.htmlPreview

Specifies if the graph container should be used for preview. If this is used then drop target detection relies entirely on mxGraph.getCellAt because the HTML preview does not “let events through”. Default is false.

shape

mxGraphHandler.prototype.shape

Reference to the mxShape that represents the preview.

scaleGrid

mxGraphHandler.prototype.scaleGrid

Specifies if the grid should be scaled. Default is false.

rotationEnabled

mxGraphHandler.prototype.rotationEnabled

Specifies if the bounding box should allow for rotation. Default is true.

Functions

isEnabled

mxGraphHandler.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxGraphHandler.prototype.setEnabled = function( value )

Sets enabled.

isCloneEnabled

mxGraphHandler.prototype.isCloneEnabled = function()

Returns cloneEnabled.

setCloneEnabled

mxGraphHandler.prototype.setCloneEnabled = function( value )

Sets cloneEnabled.

Parameters

value

Boolean that specifies the new clone enabled state.

isMoveEnabled

mxGraphHandler.prototype.isMoveEnabled = function()

Returns moveEnabled.

setMoveEnabled

mxGraphHandler.prototype.setMoveEnabled = function( value )

Sets moveEnabled.

isSelectEnabled

mxGraphHandler.prototype.isSelectEnabled = function()

Returns selectEnabled.

setSelectEnabled

mxGraphHandler.prototype.setSelectEnabled = function( value )

Sets selectEnabled.

isRemoveCellsFromParent

mxGraphHandler.prototype.isRemoveCellsFromParent = function()

Returns removeCellsFromParent.

setRemoveCellsFromParent

mxGraphHandler.prototype.setRemoveCellsFromParent = function( value )

Sets removeCellsFromParent.

getInitialCellForEvent

mxGraphHandler.prototype.getInitialCellForEvent = function( me )

Hook to return initial cell for the given event.

isDelayedSelection

mxGraphHandler.prototype.isDelayedSelection = function( cell,
me )

Hook to return true for delayed selections.

consumeMouseEvent

mxGraphHandler.prototype.consumeMouseEvent = function( evtName,
me )

Consumes the given mouse event. NOTE: This may be used to enable click events for links in labels on iOS as follows as consuming the initial touchStart disables firing the subsequent click event on the link.

<code> mxGraphHandler.prototype.consumeMouseEvent = function(evtName, me) { var source = mxEvent.getSource(me.getEvent());

if (!mxEvent.isTouchEvent(me.getEvent()) || source.nodeName != ‘A’) { me.consume(); } } </code>

mouseDown

mxGraphHandler.prototype.mouseDown = function( sender,
me )

Handles the event by selecing the given cell and creating a handle for it. By consuming the event all subsequent events of the gesture are redirected to this handler.

getGuideStates

mxGraphHandler.prototype.getGuideStates = function()

Creates an array of cell states which should be used as guides.

getCells

mxGraphHandler.prototype.getCells = function( initialCell )

Returns the cells to be modified by this handler. This implementation returns all selection cells that are movable, or the given initial cell if the given cell is not selected and movable. This handles the case of moving unselectable or unselected cells.

Parameters

initialCell

mxCell that triggered this handler.

getPreviewBounds

mxGraphHandler.prototype.getPreviewBounds = function( cells )

Returns the mxRectangle used as the preview bounds for moving the given cells.

getBoundingBox

mxGraphHandler.prototype.getBoundingBox = function( cells )

Returns the union of the mxCellStates for the given array of mxCells. For vertices, this method uses the bounding box of the corresponding shape if one exists. The bounding box of the corresponding text label and all controls and overlays are ignored. See also: mxGraphView.getBounds and mxGraph.getBoundingBox.

Parameters

cells

Array of mxCells whose bounding box should be returned.

createPreviewShape

mxGraphHandler.prototype.createPreviewShape = function( bounds )

Creates the shape used to draw the preview for the given bounds.

start

mxGraphHandler.prototype.start = function( cell,
x,
y )

Starts the handling of the mouse gesture.

useGuidesForEvent

mxGraphHandler.prototype.useGuidesForEvent = function( me )

Returns true if the guides should be used for the given mxMouseEvent. This implementation returns mxGuide.isEnabledForEvent.

snap

mxGraphHandler.prototype.snap = function( vector )

Snaps the given vector to the grid and returns the given mxPoint instance.

getDelta

mxGraphHandler.prototype.getDelta = function( me )

Returns an mxPoint that represents the vector for moving the cells for the given mxMouseEvent.

updateHint

mxGraphHandler.prototype.updateHint = function( me )

Hook for subclassers do show details while the handler is active.

removeHint

mxGraphHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundLength

mxGraphHandler.prototype.roundLength = function( length )

Hook for rounding the unscaled vector. This uses Math.round.

mouseMove

mxGraphHandler.prototype.mouseMove = function( sender,
me )

Handles the event by highlighting possible drop targets and updating the preview.

updatePreviewShape

mxGraphHandler.prototype.updatePreviewShape = function()

Updates the bounds of the preview shape.

setHighlightColor

mxGraphHandler.prototype.setHighlightColor = function( color )

Sets the color of the rectangle used to highlight drop targets.

Parameters

color

String that represents the new highlight color.

mouseUp

mxGraphHandler.prototype.mouseUp = function( sender,
me )

Handles the event by applying the changes to the selection cells.

selectDelayed

mxGraphHandler.prototype.selectDelayed = function( me )

Implements the delayed selection for the given mouse event.

reset

mxGraphHandler.prototype.reset = function()

Resets the state of this handler.

shouldRemoveCellsFromParent

mxGraphHandler.prototype.shouldRemoveCellsFromParent = function( parent,
cells,
evt )

Returns true if the given cells should be removed from the parent for the specified mousereleased event.

moveCells

mxGraphHandler.prototype.moveCells = function( cells,
dx,
dy,
clone,
target,
evt )

Moves the given cells by the specified amount.

moveCells

Moves the given cells by the specified amount.

destroyShapes

mxGraphHandler.prototype.destroyShapes = function()

Destroy the preview and highlight shapes.

destroy

mxGraphHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxPanningHandler

Event handler that pans and creates popupmenus. To use the left mousebutton for panning without interfering with cell moving and resizing, use <isUseLeftButton> and <isIgnoreCell>. For grid size steps while panning, use useGrid. This handler is built-into <mxGraph.panningHandler> and enabled using mxGraph.setPanning.

Summary

Functions
mxPanningHandler	Constructs an event handler that creates a mxPopupMenu and pans the graph.
Events
mxEvent.PAN_START	Fires when the panning handler changes its <active> state to true.
mxEvent.PAN	Fires while handle is processing events.
mxEvent.PAN_END	Fires when the panning handler changes its <active> state to false.
Variables
graph	Reference to the enclosing mxGraph.
useLeftButtonForPanning	Specifies if panning should be active for the left mouse button.
usePopupTrigger	Specifies if mxEvent.isPopupTrigger should also be used for panning.
ignoreCell	Specifies if panning should be active even if there is a cell under the mousepointer.
previewEnabled	Specifies if the panning should be previewed.
useGrid	Specifies if the panning steps should be aligned to the grid size.
panningEnabled	Specifies if panning should be enabled.
pinchEnabled	Specifies if pinch gestures should be handled as zoom.
maxScale	Specifies the maximum scale.
minScale	Specifies the minimum scale.
dx	Holds the current horizontal offset.
dy	Holds the current vertical offset.
startX	Holds the x-coordinate of the start point.
startY	Holds the y-coordinate of the start point.
Functions
isActive	Returns true if the handler is currently active.
isPanningEnabled	Returns panningEnabled.
setPanningEnabled	Sets panningEnabled.
isPinchEnabled	Returns pinchEnabled.
setPinchEnabled	Sets pinchEnabled.
isPanningTrigger	Returns true if the given event is a panning trigger for the optional given cell.
isForcePanningEvent	Returns true if the given mxMouseEvent should start panning.
mouseDown	Handles the event by initiating the panning.
start	Starts panning at the given event.
consumePanningTrigger	Consumes the given mxMouseEvent if it was a panning trigger in mouseDown.
mouseMove	Handles the event by updating the panning on the graph.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
panGraph	Pans graph by the given amount.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxPanningHandler

Constructs an event handler that creates a mxPopupMenu and pans the graph.

Events

mxEvent.PAN_START

Fires when the panning handler changes its <active> state to true. The <code>event</code> property contains the corresponding mxMouseEvent.

mxEvent.PAN

Fires while handle is processing events. The <code>event</code> property contains the corresponding mxMouseEvent.

mxEvent.PAN_END

Fires when the panning handler changes its <active> state to false. The <code>event</code> property contains the corresponding mxMouseEvent.

Variables

graph

mxPanningHandler.prototype.graph

Reference to the enclosing mxGraph.

useLeftButtonForPanning

mxPanningHandler.prototype.useLeftButtonForPanning

Specifies if panning should be active for the left mouse button. Setting this to true may conflict with mxRubberband. Default is false.

usePopupTrigger

mxPanningHandler.prototype.usePopupTrigger

Specifies if mxEvent.isPopupTrigger should also be used for panning.

ignoreCell

mxPanningHandler.prototype.ignoreCell

Specifies if panning should be active even if there is a cell under the mousepointer. Default is false.

previewEnabled

mxPanningHandler.prototype.previewEnabled

Specifies if the panning should be previewed. Default is true.

useGrid

mxPanningHandler.prototype.useGrid

Specifies if the panning steps should be aligned to the grid size. Default is false.

panningEnabled

mxPanningHandler.prototype.panningEnabled

Specifies if panning should be enabled. Default is true.

pinchEnabled

mxPanningHandler.prototype.pinchEnabled

Specifies if pinch gestures should be handled as zoom. Default is true.

maxScale

mxPanningHandler.prototype.maxScale

Specifies the maximum scale. Default is 8.

minScale

mxPanningHandler.prototype.minScale

Specifies the minimum scale. Default is 0.01.

dx

mxPanningHandler.prototype.dx

Holds the current horizontal offset.

dy

mxPanningHandler.prototype.dy

Holds the current vertical offset.

startX

mxPanningHandler.prototype.startX

Holds the x-coordinate of the start point.

startY

mxPanningHandler.prototype.startY

Holds the y-coordinate of the start point.

Functions

isActive

mxPanningHandler.prototype.isActive = function()

Returns true if the handler is currently active.

isPanningEnabled

mxPanningHandler.prototype.isPanningEnabled = function()

Returns panningEnabled.

setPanningEnabled

mxPanningHandler.prototype.setPanningEnabled = function( value )

Sets panningEnabled.

isPinchEnabled

mxPanningHandler.prototype.isPinchEnabled = function()

Returns pinchEnabled.

setPinchEnabled

mxPanningHandler.prototype.setPinchEnabled = function( value )

Sets pinchEnabled.

isPanningTrigger

mxPanningHandler.prototype.isPanningTrigger = function( me )

Returns true if the given event is a panning trigger for the optional given cell. This returns true if control-shift is pressed or if usePopupTrigger is true and the event is a popup trigger.

isForcePanningEvent

mxPanningHandler.prototype.isForcePanningEvent = function( me )

Returns true if the given mxMouseEvent should start panning. This implementation always returns true if ignoreCell is true or for multi touch events.

mouseDown

mxPanningHandler.prototype.mouseDown = function( sender,
me )

Handles the event by initiating the panning. By consuming the event all subsequent events of the gesture are redirected to this handler.

start

mxPanningHandler.prototype.start = function( me )

Starts panning at the given event.

consumePanningTrigger

mxPanningHandler.prototype.consumePanningTrigger = function( me )

Consumes the given mxMouseEvent if it was a panning trigger in mouseDown. The default is to invoke mxMouseEvent.consume. Note that this will block any further event processing. If you haven’t disabled built-in context menus and require immediate selection of the cell on mouseDown in Safari and/or on the Mac, then use the following code:

mxPanningHandler.prototype.consumePanningTrigger = function(me)
{
  if (me.evt.preventDefault)
  {
    me.evt.preventDefault();
  }

  // Stops event processing in IE
  me.evt.returnValue = false;

  // Sets local consumed state
  if (!mxClient.IS_SF && !mxClient.IS_MAC)
  {
    me.consumed = true;
  }
};

mouseMove

mxPanningHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the panning on the graph.

mouseUp

mxPanningHandler.prototype.mouseUp = function( sender,
me )

Handles the event by setting the translation on the view or showing the popupmenu.

mouseUp

Handles the event by setting the translation on the view or showing the popupmenu.

panGraph

mxPanningHandler.prototype.panGraph = function( dx,
dy )

Pans graph by the given amount.

destroy

mxPanningHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxPopupMenuHandler

Event handler that creates popupmenus.

Summary

Functions
mxPopupMenuHandler	Constructs an event handler that creates a mxPopupMenu.
Variables
graph	Reference to the enclosing mxGraph.
selectOnPopup	Specifies if cells should be selected if a popupmenu is displayed for them.
clearSelectionOnBackground	Specifies if cells should be deselected if a popupmenu is displayed for the diagram background.
triggerX	X-coordinate of the mouse down event.
triggerY	Y-coordinate of the mouse down event.
screenX	Screen X-coordinate of the mouse down event.
screenY	Screen Y-coordinate of the mouse down event.
Functions
init	Initializes the shapes required for this vertex handler.
isSelectOnPopup	Hook for returning if a cell should be selected for a given mxMouseEvent.
mouseDown	Handles the event by initiating the panning.
mouseMove	Handles the event by updating the panning on the graph.
mouseUp	Handles the event by setting the translation on the view or showing the popupmenu.
getCellForPopupEvent	Hook to return the cell for the mouse up popup trigger handling.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxPopupMenuHandler

function mxPopupMenuHandler( graph,
factoryMethod )

Constructs an event handler that creates a mxPopupMenu.

Variables

graph

mxPopupMenuHandler.prototype.graph

Reference to the enclosing mxGraph.

selectOnPopup

mxPopupMenuHandler.prototype.selectOnPopup

Specifies if cells should be selected if a popupmenu is displayed for them. Default is true.

clearSelectionOnBackground

mxPopupMenuHandler.prototype.clearSelectionOnBackground

Specifies if cells should be deselected if a popupmenu is displayed for the diagram background. Default is true.

triggerX

mxPopupMenuHandler.prototype.triggerX

X-coordinate of the mouse down event.

triggerY

mxPopupMenuHandler.prototype.triggerY

Y-coordinate of the mouse down event.

screenX

mxPopupMenuHandler.prototype.screenX

Screen X-coordinate of the mouse down event.

screenY

mxPopupMenuHandler.prototype.screenY

Screen Y-coordinate of the mouse down event.

Functions

init

mxPopupMenuHandler.prototype.init = function()

Initializes the shapes required for this vertex handler.

isSelectOnPopup

mxPopupMenuHandler.prototype.isSelectOnPopup = function( me )

Hook for returning if a cell should be selected for a given mxMouseEvent. This implementation returns selectOnPopup.

mouseDown

mxPopupMenuHandler.prototype.mouseDown = function( sender,
me )

Handles the event by initiating the panning. By consuming the event all subsequent events of the gesture are redirected to this handler.

mouseMove

mxPopupMenuHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the panning on the graph.

mouseUp

mxPopupMenuHandler.prototype.mouseUp = function( sender,
me )

Handles the event by setting the translation on the view or showing the popupmenu.

getCellForPopupEvent

mxPopupMenuHandler.prototype.getCellForPopupEvent = function( me )

Hook to return the cell for the mouse up popup trigger handling.

destroy

mxPopupMenuHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxCellMarker

A helper class to process mouse locations and highlight cells.

Helper class to highlight cells. To add a cell marker to an existing graph for highlighting all cells, the following code is used:

var marker = new mxCellMarker(graph);
graph.addMouseListener({
  mouseDown: function() {},
  mouseMove: function(sender, me)
  {
    marker.process(me);
  },
  mouseUp: function() {}
});

Summary

Events
mxEvent.MARK	Fires after a cell has been marked or unmarked.
Functions
mxCellMarker	Constructs a new cell marker.
Variables
graph	Reference to the enclosing mxGraph.
enabled	Specifies if the marker is enabled.
hotspot	Specifies the portion of the width and height that should trigger a highlight.
hotspotEnabled	Specifies if the hotspot is enabled.
validColor	Holds the valid marker color.
invalidColor	Holds the invalid marker color.
currentColor	Holds the current marker color.
validState	Holds the marked mxCellState if it is valid.
markedState	Holds the marked mxCellState.
Functions
setEnabled	Enables or disables event handling.
isEnabled	Returns true if events are handled.
setHotspot	Sets the hotspot.
getHotspot	Returns the hotspot.
setHotspotEnabled	Specifies whether the hotspot should be used in intersects.
isHotspotEnabled	Returns true if hotspot is used in intersects.
hasValidState	Returns true if validState is not null.
getValidState	Returns the validState.
getMarkedState	Returns the markedState.
reset	Resets the state of the cell marker.
process	Processes the given event and cell and marks the state returned by getState with the color returned by getMarkerColor.
setCurrentState	Sets and marks the current valid state.
markCell	Marks the given cell using the given color, or validColor if no color is specified.
mark	Marks the markedState and fires a mark event.
unmark	Hides the marker and fires a mark event.
isValidState	Returns true if the given mxCellState is a valid state.
getMarkerColor	Returns the valid- or invalidColor depending on the value of isValid.
getState	Uses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.
getCell	Returns the mxCell for the given event and cell.
getStateToMark	Returns the mxCellState to be marked for the given mxCellState under the mouse.
intersects	Returns true if the given coordinate pair intersects the given state.
destroy	Destroys the handler and all its resources and DOM nodes.

Events

mxEvent.MARK

Fires after a cell has been marked or unmarked. The <code>state</code> property contains the marked mxCellState or null if no state is marked.

Functions

mxCellMarker

function mxCellMarker( graph,
validColor,
invalidColor,
hotspot )

Constructs a new cell marker.

Parameters

graph	Reference to the enclosing mxGraph.
validColor	Optional marker color for valid states. Default is mxConstants.DEFAULT_VALID_COLOR.
invalidColor	Optional marker color for invalid states. Default is mxConstants.DEFAULT_INVALID_COLOR.
hotspot	Portion of the width and hight where a state intersects a given coordinate pair. A value of 0 means always highlight. Default is mxConstants.DEFAULT_HOTSPOT.

Variables

graph

mxCellMarker.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxCellMarker.prototype.enabled

Specifies if the marker is enabled. Default is true.

hotspot

mxCellMarker.prototype.hotspot

Specifies the portion of the width and height that should trigger a highlight. The area around the center of the cell to be marked is used as the hotspot. Possible values are between 0 and 1. Default is mxConstants.DEFAULT_HOTSPOT.

hotspotEnabled

mxCellMarker.prototype.hotspotEnabled

Specifies if the hotspot is enabled. Default is false.

validColor

mxCellMarker.prototype.validColor

Holds the valid marker color.

invalidColor

mxCellMarker.prototype.invalidColor

Holds the invalid marker color.

currentColor

mxCellMarker.prototype.currentColor

Holds the current marker color.

validState

mxCellMarker.prototype.validState

Holds the marked mxCellState if it is valid.

markedState

mxCellMarker.prototype.markedState

Holds the marked mxCellState.

Functions

setEnabled

mxCellMarker.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

isEnabled

mxCellMarker.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setHotspot

mxCellMarker.prototype.setHotspot = function( hotspot )

Sets the hotspot.

getHotspot

mxCellMarker.prototype.getHotspot = function()

Returns the hotspot.

setHotspotEnabled

mxCellMarker.prototype.setHotspotEnabled = function( enabled )

Specifies whether the hotspot should be used in intersects.

isHotspotEnabled

mxCellMarker.prototype.isHotspotEnabled = function()

Returns true if hotspot is used in intersects.

hasValidState

mxCellMarker.prototype.hasValidState = function()

Returns true if validState is not null.

getValidState

mxCellMarker.prototype.getValidState = function()

Returns the validState.

getMarkedState

mxCellMarker.prototype.getMarkedState = function()

Returns the markedState.

reset

mxCellMarker.prototype.reset = function()

Resets the state of the cell marker.

process

mxCellMarker.prototype.process = function( me )

Processes the given event and cell and marks the state returned by getState with the color returned by getMarkerColor. If the markerColor is not null, then the state is stored in markedState. If isValidState returns true, then the state is stored in validState regardless of the marker color. The state is returned regardless of the marker color and valid state.

setCurrentState

mxCellMarker.prototype.setCurrentState = function( state,
me,
color )

Sets and marks the current valid state.

markCell

mxCellMarker.prototype.markCell = function( cell,
color )

Marks the given cell using the given color, or validColor if no color is specified.

mark

mxCellMarker.prototype.mark = function()

Marks the markedState and fires a mark event.

unmark

mxCellMarker.prototype.unmark = function()

Hides the marker and fires a mark event.

isValidState

mxCellMarker.prototype.isValidState = function( state )

Returns true if the given mxCellState is a valid state. If this returns true, then the state is stored in validState. The return value of this method is used as the argument for getMarkerColor.

getMarkerColor

mxCellMarker.prototype.getMarkerColor = function( evt,
state,
isValid )

Returns the valid- or invalidColor depending on the value of isValid. The given mxCellState is ignored by this implementation.

getState

mxCellMarker.prototype.getState = function( me )

Uses getCell, getStateToMark and intersects to return the mxCellState for the given mxMouseEvent.

getCell

mxCellMarker.prototype.getCell = function( me )

Returns the mxCell for the given event and cell. This returns the given cell.

getStateToMark

mxCellMarker.prototype.getStateToMark = function( state )

Returns the mxCellState to be marked for the given mxCellState under the mouse. This returns the given state.

intersects

mxCellMarker.prototype.intersects = function( state,
me )

Returns true if the given coordinate pair intersects the given state. This returns true if the hotspot is 0 or the coordinates are inside the hotspot for the given cell state.

destroy

mxCellMarker.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxSelectionCellsHandler

An event handler that manages cell handlers and invokes their mouse event processing functions.

Summary

Events
mxEvent.ADD	Fires if a cell has been added to the selection.
mxEvent.REMOVE	Fires if a cell has been remove from the selection.
graph	Reference to the enclosing mxGraph.
enabled	Specifies if events are handled.
refreshHandler	Keeps a reference to an event listener for later removal.
maxHandlers	Defines the maximum number of handlers to paint individually.
handlers	mxDictionary that maps from cells to handlers.
isEnabled	Returns enabled.
setEnabled	Sets enabled.
getHandler	Returns the handler for the given cell.
reset	Resets all handlers.
refresh	Reloads or updates all handlers.
isHandlerActive	Returns true if the given handler is active and should not be redrawn.
updateHandler	Updates the handler for the given shape if one exists.
mouseDown	Redirects the given event to the handlers.
mouseMove	Redirects the given event to the handlers.
mouseUp	Redirects the given event to the handlers.
destroy	Destroys the handler and all its resources and DOM nodes.

Events

mxEvent.ADD

Fires if a cell has been added to the selection. The <code>state</code> property contains the mxCellState that has been added.

mxEvent.REMOVE

Fires if a cell has been remove from the selection. The <code>state</code> property contains the mxCellState that has been removed.

Parameters

graph

Reference to the enclosing mxGraph.

graph

mxSelectionCellsHandler.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxSelectionCellsHandler.prototype.enabled

Specifies if events are handled. Default is true.

refreshHandler

mxSelectionCellsHandler.prototype.refreshHandler

Keeps a reference to an event listener for later removal.

maxHandlers

mxSelectionCellsHandler.prototype.maxHandlers

Defines the maximum number of handlers to paint individually. Default is 100.

handlers

mxSelectionCellsHandler.prototype.handlers

mxDictionary that maps from cells to handlers.

isEnabled

mxSelectionCellsHandler.prototype.isEnabled = function()

Returns enabled.

setEnabled

mxSelectionCellsHandler.prototype.setEnabled = function( value )

Sets enabled.

getHandler

mxSelectionCellsHandler.prototype.getHandler = function( cell )

Returns the handler for the given cell.

reset

mxSelectionCellsHandler.prototype.reset = function()

Resets all handlers.

refresh

mxSelectionCellsHandler.prototype.refresh = function()

Reloads or updates all handlers.

isHandlerActive

mxSelectionCellsHandler.prototype.isHandlerActive = function( handler )

Returns true if the given handler is active and should not be redrawn.

updateHandler

mxSelectionCellsHandler.prototype.updateHandler = function( state )

Updates the handler for the given shape if one exists.

mouseDown

mxSelectionCellsHandler.prototype.mouseDown = function( sender,
me )

Redirects the given event to the handlers.

mouseMove

mxSelectionCellsHandler.prototype.mouseMove = function( sender,
me )

Redirects the given event to the handlers.

mouseUp

mxSelectionCellsHandler.prototype.mouseUp = function( sender,
me )

Redirects the given event to the handlers.

destroy

mxSelectionCellsHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxConnectionHandler

Graph event handler that creates new connections. Uses <mxTerminalMarker> for finding and highlighting the source and target vertices and factoryMethod to create the edge instance. This handler is built-into <mxGraph.connectionHandler> and enabled using mxGraph.setConnectable.

Example

new mxConnectionHandler(graph, function(source, target, style)
{
  edge = new mxCell('', new mxGeometry());
  edge.setEdge(true);
  edge.setStyle(style);
  edge.geometry.relative = true;
  return edge;
});

Here is an alternative solution that just sets a specific user object for new edges by overriding insertEdge.

mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
  value = 'Test';

  return mxConnectionHandlerInsertEdge.apply(this, arguments);
};

Using images to trigger connections

This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using connect. The new edge is created using createEdge which in turn uses factoryMethod or creates a new default edge.

The handler uses a “highlight-paradigm” for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products. In order to allow both, moving and connecting cells at the same time, mxConstants.DEFAULT_HOTSPOT is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection. The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5. In addition, mxConstants.MIN_HOTSPOT_SIZE defines the minimum number of pixels for the width and height of the hotspot.

This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out. Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.

To come across these issues, the handle has an additional createIcons hook with a default implementation that allows to create one icon to be used to trigger new connections. If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted. The createIcons hook may be overridden to create more than one mxImageShape for creating new connections, but the default implementation supports one image and is used as follows:

In order to display the “connect image” whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:

mxConstants.DEFAULT_HOTSPOT = 1;

In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:

mxConstants.HIGHLIGHT_COLOR = null;

To install the image, the connectImage field of the mxConnectionHandler must be assigned a new mxImage instance:

mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);

This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections. In createIcons the icon field of the handler will be set in order to remember the icon that has been clicked for creating the new connection. This field will be available under selectedIcon in the connect method, which may be overridden to take the icon that triggered the new connection into account. This is useful if more than one icon may be used to create a connection.

Summary

Events
mxEvent.START	Fires when a new connection is being created by the user.
mxEvent.CONNECT	Fires between begin- and endUpdate in connect.
mxEvent.RESET	Fires when the reset method is invoked.
mxConnectionHandler	Constructs an event handler that connects vertices using the specified factory method to create the new edges.
graph	Reference to the enclosing mxGraph.
factoryMethod	Function that is used for creating new edges.
moveIconFront	Specifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBack	Specifies if icons should be moved to the back of the overlay pane.
connectImage	mxImage that is used to trigger the creation of a new connection.
targetConnectImage	Specifies if the connect icon should be centered on the target state while connections are being previewed.
enabled	Specifies if events are handled.
select	Specifies if new edges should be selected.
createTarget	Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
marker	Holds the <mxTerminalMarker> used for finding source and target cells.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while connections are being created.
waypointsEnabled	Specifies if single clicks should add waypoints on the new edge.
ignoreMouseDown	Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
first	Holds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffset	Holds the offset for connect icons during connection preview.
edgeState	Optional mxCellState that represents the preview edge while the handler is active.
changeHandler	Holds the change event listener for later removal.
drillHandler	Holds the drill event listener for later removal.
mouseDownCounter	Counts the number of mouseDown events since the start.
movePreviewAway	Switch to enable moving the preview away from the mousepointer.
outlineConnect	Specifies if connections to the outline of a highlighted target should be enabled.
livePreview	Specifies if the actual shape of the edge state should be used for the preview.
cursor	Specifies the cursor to be used while the handler is active.
insertBeforeSource	Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isInsertBefore	Returns insertBeforeSource for non-loops and false for loops.
isCreateTarget	Returns createTarget.
setCreateTarget	Sets createTarget.
createShape	Creates the preview shape for new connections.
init	Initializes the shapes required for this connection handler.
isConnectableCell	Returns true if the given cell is connectable.
createMarker	Creates and returns the mxCellMarker used in marker.
start	Starts a new connection for the given state and coordinates.
isConnecting	Returns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSource	Returns mxGraph.isValidSource for the given source terminal.
isValidTarget	Returns true.
validateConnection	Returns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImage	Hook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForState	Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIcons	Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIcons	Redraws the given array of mxImageShapes.
redrawIcons	Redraws the given array of mxImageShapes.
destroyIcons	Destroys the connect icons and resets the respective state.
isStartEvent	Returns true if the given mouse down event should start this handler.
mouseDown	Handles the event by initiating a new connection.
isImmediateConnectSource	Returns true if a tap on the given source state should immediately start connecting.
createEdgeState	Hook to return an mxCellState which may be used during the preview.
isOutlineConnectEvent	Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentState	Updates the current state for a given mouse move event by using the marker.
isCellEnabled	Returns true if the given cell does not allow new connections to be created.
convertWaypoint	Converts the given point from screen coordinates to model coordinates.
snapToPreview	Called to snap the given point to the current preview.
mouseMove	Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeState	Updates edgeState.
getTargetPerimeterPoint	Returns the perimeter point for the given target state.
getSourcePerimeterPoint	Hook to update the icon position(s) based on a mouseOver event.
updateIcons	Hook to update the icon position(s) based on a mouseOver event.
isStopEvent	Returns true if the given mouse up event should stop this handler.
addWaypoint	Adds the waypoint for the given event to <waypoints>.
checkConstraints	Returns true if the connection for the given constraints is valid.
mouseUp	Handles the event by inserting the new connection.
reset	Resets the state of this handler.
drawPreview	Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeWidth	Returns the width used to draw the preview edge.
connect	Connects the given source and target using a new edge.
selectCells	Selects the given edge after adding a new connection.
insertEdge	Creates, inserts and returns the new edge for the given parameters.
createTargetVertex	Hook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentTolerance	Returns the tolerance for aligning new targets to sources.
createEdge	Creates and returns a new edge using factoryMethod if one exists.
destroy	Destroys the handler and all its resources and DOM nodes.

Events

mxEvent.START

Fires when a new connection is being created by the user. The <code>state</code> property contains the state of the source cell.

mxEvent.CONNECT

Fires between begin- and endUpdate in connect. The <code>cell</code> property contains the inserted edge, the <code>event</code> and <code>target</code> properties contain the respective arguments that were passed to connect (where target corresponds to the dropTarget argument). Finally, the <code>terminal</code> property corresponds to the target argument in connect or the clone of the source terminal if createTarget is enabled.

Note that the target is the cell under the mouse where the mouse button was released. Depending on the logic in the handler, this doesn’t necessarily have to be the target of the inserted edge. To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used. To get more details about the actual connection point, mxGraph.getConnectionConstraint can be used. To resolve the port IDs, use mxGraphModel.getCell.

graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
  var edge = evt.getProperty('cell');
  var source = graph.getModel().getTerminal(edge, true);
  var target = graph.getModel().getTerminal(edge, false);

  var style = graph.getCellStyle(edge);
  var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
  var targetPortId = style[mxConstants.STYLE_TARGET_PORT];

  mxLog.show();
  mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});

mxEvent.RESET

Fires when the reset method is invoked.

mxConnectionHandler

function mxConnectionHandler( graph,
factoryMethod )

Constructs an event handler that connects vertices using the specified factory method to create the new edges. Modify <mxConstants.ACTIVE_REGION> to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.

Parameters

graph	Reference to the enclosing mxGraph.
factoryMethod	Optional function to create the edge. The function takes the source and target mxCell as the first and second argument and an optional cell style from the preview as the third argument. It returns the mxCell that represents the new edge.

graph

mxConnectionHandler.prototype.graph

Reference to the enclosing mxGraph.

factoryMethod

mxConnectionHandler.prototype.factoryMethod

Function that is used for creating new edges. The function takes the source and target mxCell as the first and second argument and returns a new mxCell that represents the edge. This is used in createEdge.

moveIconFront

mxConnectionHandler.prototype.moveIconFront

Specifies if icons should be displayed inside the graph container instead of the overlay pane. This is used for HTML labels on vertices which hide the connect icon. This has precendence over moveIconBack when set to true. Default is false.

moveIconBack

mxConnectionHandler.prototype.moveIconBack

Specifies if icons should be moved to the back of the overlay pane. This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle. Default is false.

connectImage

mxConnectionHandler.prototype.connectImage

mxImage that is used to trigger the creation of a new connection. This is used in createIcons. Default is null.

targetConnectImage

mxConnectionHandler.prototype.targetConnectImage

Specifies if the connect icon should be centered on the target state while connections are being previewed. Default is false.

enabled

mxConnectionHandler.prototype.enabled

Specifies if events are handled. Default is true.

select

mxConnectionHandler.prototype.select

Specifies if new edges should be selected. Default is true.

createTarget

mxConnectionHandler.prototype.createTarget

Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. Setting this to true means the connection will be drawn as valid if no target is under the mouse, and createTargetVertex will be called before the connection is created between the source cell and the newly created vertex in createTargetVertex, which can be overridden to create a new target. Default is false.

marker

mxConnectionHandler.prototype.marker

Holds the <mxTerminalMarker> used for finding source and target cells.

constraintHandler

mxConnectionHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxConnectionHandler.prototype.error

Holds the current validation error while connections are being created.

waypointsEnabled

mxConnectionHandler.prototype.waypointsEnabled

Specifies if single clicks should add waypoints on the new edge. Default is false.

ignoreMouseDown

mxConnectionHandler.prototype.ignoreMouseDown

Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. Default is false, that is, the handler only highlights the source if no button is being pressed.

first

mxConnectionHandler.prototype.first

Holds the mxPoint where the mouseDown took place while the handler is active.

connectIconOffset

mxConnectionHandler.prototype.connectIconOffset

Holds the offset for connect icons during connection preview. Default is mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET). Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.

edgeState

mxConnectionHandler.prototype.edgeState

Optional mxCellState that represents the preview edge while the handler is active. This is created in createEdgeState.

changeHandler

mxConnectionHandler.prototype.changeHandler

Holds the change event listener for later removal.

drillHandler

mxConnectionHandler.prototype.drillHandler

Holds the drill event listener for later removal.

mouseDownCounter

mxConnectionHandler.prototype.mouseDownCounter

Counts the number of mouseDown events since the start. The initial mouse down event counts as 1.

movePreviewAway

mxConnectionHandler.prototype.movePreviewAway

Switch to enable moving the preview away from the mousepointer. This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used. Default is the value of mxClient.IS_VML.

outlineConnect

mxConnectionHandler.prototype.outlineConnect

Specifies if connections to the outline of a highlighted target should be enabled. This will allow to place the connection point along the outline of the highlighted target. Default is false.

livePreview

mxConnectionHandler.prototype.livePreview

Specifies if the actual shape of the edge state should be used for the preview. Default is false. (Ignored if no edge state is created in createEdgeState.)

cursor

mxConnectionHandler.prototype.cursor

Specifies the cursor to be used while the handler is active. Default is null.

insertBeforeSource

mxConnectionHandler.prototype.insertBeforeSource

Specifies if new edges should be inserted before the source vertex in the cell hierarchy. Default is false for backwards compatibility.

isEnabled

mxConnectionHandler.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxConnectionHandler.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

isInsertBefore

mxConnectionHandler.prototype.isInsertBefore = function( edge,
source,
target,
evt,
dropTarget )

Returns insertBeforeSource for non-loops and false for loops.

Parameters

edge	mxCell that represents the edge to be inserted.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
evt	Mousedown event of the connect gesture.
dropTarget	mxCell that represents the cell under the mouse when it was released.

isCreateTarget

mxConnectionHandler.prototype.isCreateTarget = function( evt )

Returns createTarget.

Parameters

evt	Current active native pointer event.

setCreateTarget

mxConnectionHandler.prototype.setCreateTarget = function( value )

Sets createTarget.

createShape

mxConnectionHandler.prototype.createShape = function()

Creates the preview shape for new connections.

init

mxConnectionHandler.prototype.init = function()

Initializes the shapes required for this connection handler. This should be invoked if <mxGraph.container> is assigned after the connection handler has been created.

isConnectableCell

mxConnectionHandler.prototype.isConnectableCell = function( cell )

Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.

createMarker

mxConnectionHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

start

mxConnectionHandler.prototype.start = function( state,
x,
y,
edgeState )

Starts a new connection for the given state and coordinates.

isConnecting

mxConnectionHandler.prototype.isConnecting = function()

Returns true if the source terminal has been clicked and a new connection is currently being previewed.

isValidSource

mxConnectionHandler.prototype.isValidSource = function( cell,
me )

Returns mxGraph.isValidSource for the given source terminal.

Parameters

cell	mxCell that represents the source terminal.
me	mxMouseEvent that is associated with this call.

isValidTarget

mxConnectionHandler.prototype.isValidTarget = function( cell )

Returns true. The call to mxGraph.isValidTarget is implicit by calling mxGraph.getEdgeValidationError in validateConnection. This is an additional hook for disabling certain targets in this specific handler.

Parameters

cell	mxCell that represents the target terminal.

validateConnection

mxConnectionHandler.prototype.validateConnection = function( source,
target )

Returns the error message or an empty string if the connection for the given source target pair is not valid. Otherwise it returns null. This implementation uses mxGraph.getEdgeValidationError.

Parameters

source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

getConnectImage

mxConnectionHandler.prototype.getConnectImage = function( state )

Hook to return the mxImage used for the connection icon of the given mxCellState. This implementation returns connectImage.

Parameters

state

mxCellState whose connect image should be returned.

isMoveIconToFrontForState

mxConnectionHandler.prototype.isMoveIconToFrontForState = function( state )

Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.

Parameters

state

mxCellState whose connect icons should be returned.

createIcons

mxConnectionHandler.prototype.createIcons = function( state )

Creates the array mxImageShapes that represent the connect icons for the given mxCellState.

Parameters

state

mxCellState whose connect icons should be returned.

redrawIcons

mxConnectionHandler.prototype.redrawIcons = function( icons,
state )

Redraws the given array of mxImageShapes.

Parameters

icons

Optional array of mxImageShapes to be redrawn.

redrawIcons

Redraws the given array of mxImageShapes.

Parameters

icons

Optional array of mxImageShapes to be redrawn.

destroyIcons

mxConnectionHandler.prototype.destroyIcons = function()

Destroys the connect icons and resets the respective state.

isStartEvent

mxConnectionHandler.prototype.isStartEvent = function( me )

Returns true if the given mouse down event should start this handler. The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the constraintHandler are not null, or <previous> and error are not null and <icons> is null or <icons> and <icon> are not null.

mouseDown

mxConnectionHandler.prototype.mouseDown = function( sender,
me )

Handles the event by initiating a new connection.

isImmediateConnectSource

mxConnectionHandler.prototype.isImmediateConnectSource = function( state )

Returns true if a tap on the given source state should immediately start connecting. This implementation returns true if the state is not movable in the graph.

createEdgeState

mxConnectionHandler.prototype.createEdgeState = function( me )

Hook to return an mxCellState which may be used during the preview. This implementation returns null.

Use the following code to create a preview for an existing edge style

graph.connectionHandler.createEdgeState = function(me)
{
  var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');

  return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};

isOutlineConnectEvent

mxConnectionHandler.prototype.isOutlineConnectEvent = function( me )

Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.

updateCurrentState

mxConnectionHandler.prototype.updateCurrentState = function( me,
point )

Updates the current state for a given mouse move event by using the marker.

isCellEnabled

mxConnectionHandler.prototype.isCellEnabled = function( cell )

Returns true if the given cell does not allow new connections to be created.

convertWaypoint

mxConnectionHandler.prototype.convertWaypoint = function( point )

Converts the given point from screen coordinates to model coordinates.

snapToPreview

mxConnectionHandler.prototype.snapToPreview = function( me,
point )

Called to snap the given point to the current preview. This snaps to the first point of the preview if alt is not pressed.

mouseMove

mxConnectionHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the preview edge or by highlighting a possible source or target terminal.

updateEdgeState

mxConnectionHandler.prototype.updateEdgeState = function( current,
constraint )

Updates edgeState.

getTargetPerimeterPoint

mxConnectionHandler.prototype.getTargetPerimeterPoint = function( state,
me )

Returns the perimeter point for the given target state.

Parameters

state	mxCellState that represents the target cell state.
me	mxMouseEvent that represents the mouse move.

getSourcePerimeterPoint

mxConnectionHandler.prototype.getSourcePerimeterPoint = function( state,
next,
me )

Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.

Parameters

state	mxCellState that represents the target cell state.
next	mxPoint that represents the next point along the previewed edge.
me	mxMouseEvent that represents the mouse move.

updateIcons

mxConnectionHandler.prototype.updateIcons = function( state,
icons,
me )

Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.

Parameters

state	mxCellState under the mouse.
icons	Array of currently displayed icons.
me	mxMouseEvent that contains the mouse event.

isStopEvent

mxConnectionHandler.prototype.isStopEvent = function( me )

Returns true if the given mouse up event should stop this handler. The connection will be created if error is null. Note that this is only called if waypointsEnabled is true. This implemtation returns true if there is a cell state in the given event.

addWaypoint

mxConnectionHandler.prototype.addWaypointForEvent = function( me )

Adds the waypoint for the given event to <waypoints>.

checkConstraints

mxConnectionHandler.prototype.checkConstraints = function( c1,
c2 )

Returns true if the connection for the given constraints is valid. This implementation returns true if the constraints are not pointing to the same fixed connection point.

mouseUp

mxConnectionHandler.prototype.mouseUp = function( sender,
me )

Handles the event by inserting the new connection.

reset

mxConnectionHandler.prototype.reset = function()

Resets the state of this handler.

drawPreview

mxConnectionHandler.prototype.drawPreview = function()

Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.

getEdgeColor

Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.

Parameters

valid

Boolean indicating if the color for a valid edge should be returned.

getEdgeColor

mxConnectionHandler.prototype.getEdgeColor = function( valid )

Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.

Parameters

valid

Boolean indicating if the color for a valid edge should be returned.

getEdgeWidth

mxConnectionHandler.prototype.getEdgeWidth = function( valid )

Returns the width used to draw the preview edge. This returns 3 if there is no edge validation error and 1 otherwise.

Parameters

valid

Boolean indicating if the width for a valid edge should be returned.

connect

mxConnectionHandler.prototype.connect = function( source,
target,
evt,
dropTarget )

Connects the given source and target using a new edge. This implementation uses createEdge to create the edge.

Parameters

source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
evt	Mousedown event of the connect gesture.
dropTarget	mxCell that represents the cell under the mouse when it was released.

selectCells

mxConnectionHandler.prototype.selectCells = function( edge,
target )

Selects the given edge after adding a new connection. The target argument contains the target vertex if one has been inserted.

insertEdge

mxConnectionHandler.prototype.insertEdge = function( parent,
id,
value,
source,
target,
style )

Creates, inserts and returns the new edge for the given parameters. This implementation does only use createEdge if factoryMethod is defined, otherwise mxGraph.insertEdge will be used.

createTargetVertex

mxConnectionHandler.prototype.createTargetVertex = function( evt,
source )

Hook method for creating new vertices on the fly if no target was under the mouse. This is only called if createTarget is true and returns null.

Parameters

evt	Mousedown event of the connect gesture.
source	mxCell that represents the source terminal.

getAlignmentTolerance

mxConnectionHandler.prototype.getAlignmentTolerance = function( evt )

Returns the tolerance for aligning new targets to sources. This returns the grid size / 2.

createEdge

mxConnectionHandler.prototype.createEdge = function( value,
source,
target,
style )

Creates and returns a new edge using factoryMethod if one exists. If no factory method is defined, then a new default edge is returned. The source and target arguments are informal, the actual connection is setup later by the caller of this function.

Parameters

value	Value to be used for creating the edge.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
style	Optional style from the preview edge.

destroy

mxConnectionHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes. This should be called on all instances. It is called automatically for the built-in instance created for each mxGraph.

mxConstraintHandler

Handles constraints on connection targets. This class is in charge of showing fixed points when the mouse is over a vertex and handles constraints to establish new connections.

Summary

Functions
mxConstraintHandler	Constructs an new constraint handler.
Variables
pointImage	mxImage to be used as the image for fixed connection points.
graph	Reference to the enclosing mxGraph.
enabled	Specifies if events are handled.
highlightColor	Specifies the color for the highlight.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
reset	Resets the state of this handler.
getTolerance	Returns the tolerance to be used for intersecting connection points.
getImageForConstraint	Returns the tolerance to be used for intersecting connection points.
isEventIgnored	Returns true if the given mxMouseEvent should be ignored in update.
isStateIgnored	Returns true if the given state should be ignored.
destroyIcons	Destroys the <focusIcons> if they exist.
destroyFocusHighlight	Destroys the <focusHighlight> if one exists.
isKeepFocusEvent	Returns true if the current focused state should not be changed for the given event.
getCellForEvent	Returns the cell for the given event.
update	Updates the state of this handler based on the given mxMouseEvent.
redraw	Transfers the focus to the given state as a source or target terminal.
setFocus	Transfers the focus to the given state as a source or target terminal.
createHighlightShape	Create the shape used to paint the highlight.
intersects	Returns true if the given icon intersects the given rectangle.
destroy	Destroy this handler.

Functions

mxConstraintHandler

function mxConstraintHandler( graph )

Constructs an new constraint handler.

Parameters

graph	Reference to the enclosing mxGraph.
factoryMethod	Optional function to create the edge. The function takes the source and target mxCell as the first and second argument and returns the mxCell that represents the new edge.

Variables

pointImage

mxConstraintHandler.prototype.pointImage

mxImage to be used as the image for fixed connection points.

graph

mxConstraintHandler.prototype.graph

Reference to the enclosing mxGraph.

enabled

mxConstraintHandler.prototype.enabled

Specifies if events are handled. Default is true.

highlightColor

mxConstraintHandler.prototype.highlightColor

Specifies the color for the highlight. Default is mxConstants.DEFAULT_VALID_COLOR.

Functions

isEnabled

mxConstraintHandler.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxConstraintHandler.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

reset

mxConstraintHandler.prototype.reset = function()

Resets the state of this handler.

getTolerance

mxConstraintHandler.prototype.getTolerance = function( me )

Returns the tolerance to be used for intersecting connection points. This implementation returns mxGraph.tolerance.

Parameters

me	mxMouseEvent whose tolerance should be returned.

getImageForConstraint

mxConstraintHandler.prototype.getImageForConstraint = function( state,
constraint,
point )

Returns the tolerance to be used for intersecting connection points.

isEventIgnored

mxConstraintHandler.prototype.isEventIgnored = function( me,
source )

Returns true if the given mxMouseEvent should be ignored in update. This implementation always returns false.

isStateIgnored

mxConstraintHandler.prototype.isStateIgnored = function( state,
source )

Returns true if the given state should be ignored. This always returns false.

destroyIcons

mxConstraintHandler.prototype.destroyIcons = function()

Destroys the <focusIcons> if they exist.

destroyFocusHighlight

mxConstraintHandler.prototype.destroyFocusHighlight = function()

Destroys the <focusHighlight> if one exists.

isKeepFocusEvent

mxConstraintHandler.prototype.isKeepFocusEvent = function( me )

Returns true if the current focused state should not be changed for the given event. This returns true if shift and alt are pressed.

getCellForEvent

mxConstraintHandler.prototype.getCellForEvent = function( me,
point )

Returns the cell for the given event.

update

mxConstraintHandler.prototype.update = function( me,
source,
existingEdge,
point )

Updates the state of this handler based on the given mxMouseEvent. Source is a boolean indicating if the cell is a source or target.

redraw

mxConstraintHandler.prototype.redraw = function()

Transfers the focus to the given state as a source or target terminal. If the handler is not enabled then the outline is painted, but the constraints are ignored.

setFocus

mxConstraintHandler.prototype.setFocus = function( me,
state,
source )

Transfers the focus to the given state as a source or target terminal. If the handler is not enabled then the outline is painted, but the constraints are ignored.

createHighlightShape

mxConstraintHandler.prototype.createHighlightShape = function()

Create the shape used to paint the highlight.

Returns true if the given icon intersects the given point.

intersects

mxConstraintHandler.prototype.intersects = function( icon,
mouse,
source,
existingEdge )

Returns true if the given icon intersects the given rectangle.

destroy

mxConstraintHandler.prototype.destroy = function()

Destroy this handler.

mxRubberband

Event handler that selects rectangular regions. This is not built-into mxGraph. To enable rubberband selection in a graph, use the following code.

Example

var rubberband = new mxRubberband(graph);

Summary

Functions
mxRubberband	Constructs an event handler that selects rectangular regions in the graph using rubberband selection.
Variables
defaultOpacity	Specifies the default opacity to be used for the rubberband div.
enabled	Specifies if events are handled.
div	Holds the DIV element which is currently visible.
sharedDiv	Holds the DIV element which is used to display the rubberband.
currentX	Holds the value of the x argument in the last call to update.
currentY	Holds the value of the y argument in the last call to update.
fadeOut	Optional fade out effect.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isForceRubberbandEvent	Returns true if the given mxMouseEvent should start rubberband selection.
mouseDown	Handles the event by initiating a rubberband selection.
start	Sets the start point for the rubberband selection.
mouseMove	Handles the event by updating therubberband selection.
createShape	Creates the rubberband selection shape.
isActive	Returns true if this handler is active.
mouseUp	Handles the event by selecting the region of the rubberband using mxGraph.selectRegion.
execute	Resets the state of this handler and selects the current region for the given event.
reset	Resets the state of the rubberband selection.
update	Sets currentX and currentY and calls repaint.
repaint	Computes the bounding box and updates the style of the div.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxRubberband

function mxRubberband( graph )

Constructs an event handler that selects rectangular regions in the graph using rubberband selection.

Variables

defaultOpacity

mxRubberband.prototype.defaultOpacity

Specifies the default opacity to be used for the rubberband div. Default is 20.

enabled

mxRubberband.prototype.enabled

Specifies if events are handled. Default is true.

div

mxRubberband.prototype.div

Holds the DIV element which is currently visible.

sharedDiv

mxRubberband.prototype.sharedDiv

Holds the DIV element which is used to display the rubberband.

currentX

mxRubberband.prototype.currentX

Holds the value of the x argument in the last call to update.

currentY

mxRubberband.prototype.currentY

Holds the value of the y argument in the last call to update.

fadeOut

mxRubberband.prototype.fadeOut

Optional fade out effect. Default is false.

Functions

isEnabled

mxRubberband.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxRubberband.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

isForceRubberbandEvent

mxRubberband.prototype.isForceRubberbandEvent = function( me )

Returns true if the given mxMouseEvent should start rubberband selection. This implementation returns true if the alt key is pressed.

mouseDown

mxRubberband.prototype.mouseDown = function( sender,
me )

Handles the event by initiating a rubberband selection. By consuming the event all subsequent events of the gesture are redirected to this handler.

start

mxRubberband.prototype.start = function( x,
y )

Sets the start point for the rubberband selection.

mouseMove

mxRubberband.prototype.mouseMove = function( sender,
me )

Handles the event by updating therubberband selection.

createShape

mxRubberband.prototype.createShape = function()

Creates the rubberband selection shape.

isActive

mxRubberband.prototype.isActive = function( sender,
me )

Returns true if this handler is active.

mouseUp

mxRubberband.prototype.mouseUp = function( sender,
me )

Handles the event by selecting the region of the rubberband using mxGraph.selectRegion.

execute

mxRubberband.prototype.execute = function( evt )

Resets the state of this handler and selects the current region for the given event.

reset

mxRubberband.prototype.reset = function()

Resets the state of the rubberband selection.

update

mxRubberband.prototype.update = function( x,
y )

Sets currentX and currentY and calls repaint.

repaint

mxRubberband.prototype.repaint = function()

Computes the bounding box and updates the style of the div.

destroy

mxRubberband.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes. This does normally not need to be called, it is called automatically when the window unloads.

mxHandle

Implements a single custom handle for vertices.

Summary

Functions
mxHandle	Constructs a new handle for the given state.
Variables
cursor	Specifies the cursor to be used for this handle.
image	Specifies the mxImage to be used to render the handle.
image	Specifies the mxImage to be used to render the handle.
Functions
getPosition	Hook for subclassers to return the current position of the handle.
setPosition	Hooks for subclassers to update the style in the <state>.
execute	Hook for subclassers to execute the handle.
copyStyle	Sets the cell style with the given name to the corresponding value in <state>.
processEvent	Processes the given mxMouseEvent and invokes setPosition.
positionChanged	Called after setPosition has been called in processEvent.
getRotation	Returns the rotation defined in the style of the cell.
getTotalRotation	Returns the rotation from the style and the rotation from the direction of the cell.
init	Creates and initializes the shapes required for this handle.
createShape	Creates and returns the shape for this handle.
initShape	Initializes <shape> and sets its cursor.
redraw	Renders the shape for this handle.
isHtmlRequired	Returns true if this handle should be rendered in HTML.
rotatePoint	Rotates the point by the given angle.
flipPoint	Flips the given point vertically and/or horizontally.
snapPoint	Snaps the given point to the grid if ignore is false.
setVisible	Shows or hides this handle.
reset	Resets the state of this handle by setting its visibility to true.
destroy	Destroys this handle.

Functions

mxHandle

function mxHandle( state,
cursor,
image )

Constructs a new handle for the given state.

Parameters

state

mxCellState of the cell to be handled.

Variables

cursor

mxHandle.prototype.cursor

Specifies the cursor to be used for this handle. Default is ‘default’.

image

mxHandle.prototype.image

Specifies the mxImage to be used to render the handle. Default is null.

image

Specifies the mxImage to be used to render the handle. Default is null.

Functions

getPosition

mxHandle.prototype.getPosition = function( bounds )

Hook for subclassers to return the current position of the handle.

setPosition

mxHandle.prototype.setPosition = function( bounds,
pt,
me )

Hooks for subclassers to update the style in the <state>.

execute

mxHandle.prototype.execute = function()

Hook for subclassers to execute the handle.

copyStyle

mxHandle.prototype.copyStyle = function( key )

Sets the cell style with the given name to the corresponding value in <state>.

processEvent

mxHandle.prototype.processEvent = function( me )

Processes the given mxMouseEvent and invokes setPosition.

positionChanged

mxHandle.prototype.positionChanged = function()

Called after setPosition has been called in processEvent. This repaints the state using mxCellRenderer.

getRotation

mxHandle.prototype.getRotation = function()

Returns the rotation defined in the style of the cell.

getTotalRotation

mxHandle.prototype.getTotalRotation = function()

Returns the rotation from the style and the rotation from the direction of the cell.

init

mxHandle.prototype.init = function()

Creates and initializes the shapes required for this handle.

createShape

mxHandle.prototype.createShape = function( html )

Creates and returns the shape for this handle.

initShape

mxHandle.prototype.initShape = function( html )

Initializes <shape> and sets its cursor.

redraw

mxHandle.prototype.redraw = function()

Renders the shape for this handle.

isHtmlRequired

mxHandle.prototype.isHtmlRequired = function()

Returns true if this handle should be rendered in HTML. This returns true if the text node is in the graph container.

rotatePoint

mxHandle.prototype.rotatePoint = function( pt,
alpha )

Rotates the point by the given angle.

flipPoint

mxHandle.prototype.flipPoint = function( pt )

Flips the given point vertically and/or horizontally.

snapPoint

mxHandle.prototype.snapPoint = function( pt,
ignore )

Snaps the given point to the grid if ignore is false. This modifies the given point in-place and also returns it.

setVisible

mxHandle.prototype.setVisible = function( visible )

Shows or hides this handle.

reset

mxHandle.prototype.reset = function()

Resets the state of this handle by setting its visibility to true.

destroy

mxHandle.prototype.destroy = function()

Destroys this handle.

mxVertexHandler

Event handler for resizing cells. This handler is automatically created in mxGraph.createHandler.

Summary

Functions
mxVertexHandler	Constructs an event handler that allows to resize vertices and groups.
Variables
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState being modified.
singleSizer	Specifies if only one sizer handle at the bottom, right corner should be used.
index	Holds the index of the current handle.
allowHandleBoundsCheck	Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
handleImage	Optional mxImage to be used as handles.
tolerance	Optional tolerance for hit-detection in getHandleForEvent.
rotationEnabled	Specifies if a rotation handle should be visible.
parentHighlightEnabled	Specifies if the parent should be highlighted if a child cell is selected.
rotationRaster	Specifies if rotation steps should be “rasterized” depening on the distance to the handle.
rotationCursor	Specifies the cursor for the rotation handle.
livePreview	Specifies if resize should change the cell in-place.
manageSizers	Specifies if sizers should be hidden and spaced if the vertex is small.
constrainGroupByChildren	Specifies if the size of groups should be constrained by the children.
rotationHandleVSpacing	Vertical spacing for rotation icon.
horizontalOffset	The horizontal offset for the handles.
verticalOffset	The horizontal offset for the handles.
Functions
init	Initializes the shapes required for this vertex handler.
isRotationHandleVisible	Returns true if the rotation handle should be showing.
isConstrainedEvent	Returns true if the aspect ratio if the cell should be maintained.
isCenteredEvent	Returns true if the center of the vertex should be maintained during the resize.
createCustomHandles	Returns an array of custom handles.
updateMinBounds	Initializes the shapes required for this vertex handler.
getSelectionBounds	Returns the mxRectangle that defines the bounds of the selection border.
createParentHighlightShape	Creates the shape used to draw the selection border.
createSelectionShape	Creates the shape used to draw the selection border.
getSelectionColor	Returns mxConstants.VERTEX_SELECTION_COLOR.
getSelectionStrokeWidth	Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
isSelectionDashed	Returns <mxConstants.VERTEX_SELECTION_DASHED>.
createSizer	Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
isSizerVisible	Returns true if the sizer for the given index is visible.
createSizerShape	Creates the shape used for the sizer handle for the specified bounds an index.
createBounds	Helper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.
getHandleForEvent	Returns the index of the handle for the given event.
isCustomHandleEvent	Returns true if the given event allows custom handles to be changed.
mouseDown	Handles the event if a handle has been clicked.
isLivePreviewBorder	Called if livePreview is enabled to check if a border should be painted.
start	Starts the handling of the mouse gesture.
hideHandles	Shortcut to hideSizers.
hideSizers	Hides all sizers except.
checkTolerance	Checks if the coordinates for the given event are within the mxGraph.tolerance.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundAngle	Hook for rounding the angle.
roundLength	Hook for rounding the unscaled width or height.
mouseMove	Handles the event by updating the preview.
rotateVertex	Rotates the vertex.
rotateVertex	Rotates the vertex.
rotateVertex	Rotates the vertex.
updateLivePreview	Repaints the live preview.
mouseUp	Handles the event by applying the changes to the geometry.
rotateCell	Rotates the given cell to the given rotation.
rotateClick	Hook for subclassers to implement a single click on the rotation handle.
rotateCell	Rotates the given cell and its children by the given angle in degrees.
reset	Resets the state of this handler.
resizeCell	Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
moveChildren	Moves the children of the given cell by the given vector.
union	Returns the union of the given bounds and location for the specified handle index.
redraw	Redraws the handles and the preview.
redrawHandles	Redraws the handles.
getRotationHandlePosition	Returns an mxPoint that defines the rotation handle position.
updateParentHighlight	Updates the highlight of the parent if parentHighlightEnabled is true.
drawPreview	Redraws the preview.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxVertexHandler

function mxVertexHandler( state )

Constructs an event handler that allows to resize vertices and groups.

Parameters

state

mxCellState of the cell to be resized.

Variables

graph

mxVertexHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxVertexHandler.prototype.state

Reference to the mxCellState being modified.

singleSizer

mxVertexHandler.prototype.singleSizer

Specifies if only one sizer handle at the bottom, right corner should be used. Default is false.

index

mxVertexHandler.prototype.index

Holds the index of the current handle.

allowHandleBoundsCheck

mxVertexHandler.prototype.allowHandleBoundsCheck

Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0. Default is true.

handleImage

mxVertexHandler.prototype.handleImage

Optional mxImage to be used as handles. Default is null.

tolerance

mxVertexHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent. Default is 0.

rotationEnabled

mxVertexHandler.prototype.rotationEnabled

Specifies if a rotation handle should be visible. Default is false.

parentHighlightEnabled

mxVertexHandler.prototype.parentHighlightEnabled

Specifies if the parent should be highlighted if a child cell is selected. Default is false.

rotationRaster

mxVertexHandler.prototype.rotationRaster

Specifies if rotation steps should be “rasterized” depening on the distance to the handle. Default is true.

rotationCursor

mxVertexHandler.prototype.rotationCursor

Specifies the cursor for the rotation handle. Default is ‘crosshair’.

livePreview

mxVertexHandler.prototype.livePreview

Specifies if resize should change the cell in-place. This is an experimental feature for non-touch devices. Default is false.

manageSizers

mxVertexHandler.prototype.manageSizers

Specifies if sizers should be hidden and spaced if the vertex is small. Default is false.

constrainGroupByChildren

mxVertexHandler.prototype.constrainGroupByChildren

Specifies if the size of groups should be constrained by the children. Default is false.

rotationHandleVSpacing

mxVertexHandler.prototype.rotationHandleVSpacing

Vertical spacing for rotation icon. Default is -16.

horizontalOffset

mxVertexHandler.prototype.horizontalOffset

The horizontal offset for the handles. This is updated in redrawHandles if manageSizers is true and the sizers are offset horizontally.

verticalOffset

mxVertexHandler.prototype.verticalOffset

The horizontal offset for the handles. This is updated in redrawHandles if manageSizers is true and the sizers are offset vertically.

Functions

init

mxVertexHandler.prototype.init = function()

Initializes the shapes required for this vertex handler.

isRotationHandleVisible

mxVertexHandler.prototype.isRotationHandleVisible = function()

Returns true if the rotation handle should be showing.

isConstrainedEvent

mxVertexHandler.prototype.isConstrainedEvent = function( me )

Returns true if the aspect ratio if the cell should be maintained.

isCenteredEvent

mxVertexHandler.prototype.isCenteredEvent = function( state,
me )

Returns true if the center of the vertex should be maintained during the resize.

createCustomHandles

mxVertexHandler.prototype.createCustomHandles = function()

Returns an array of custom handles. This implementation returns null.

updateMinBounds

mxVertexHandler.prototype.updateMinBounds = function()

Initializes the shapes required for this vertex handler.

getSelectionBounds

mxVertexHandler.prototype.getSelectionBounds = function( state )

Returns the mxRectangle that defines the bounds of the selection border.

createParentHighlightShape

mxVertexHandler.prototype.createParentHighlightShape = function( bounds )

Creates the shape used to draw the selection border.

createSelectionShape

mxVertexHandler.prototype.createSelectionShape = function( bounds )

Creates the shape used to draw the selection border.

getSelectionColor

mxVertexHandler.prototype.getSelectionColor = function()

Returns mxConstants.VERTEX_SELECTION_COLOR.

getSelectionStrokeWidth

mxVertexHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.

isSelectionDashed

mxVertexHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.VERTEX_SELECTION_DASHED>.

createSizer

mxVertexHandler.prototype.createSizer = function( cursor,
index,
size,
fillColor )

Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.

isSizerVisible

mxVertexHandler.prototype.isSizerVisible = function( index )

Returns true if the sizer for the given index is visible. This returns true for all given indices.

createSizerShape

mxVertexHandler.prototype.createSizerShape = function( bounds,
index,
fillColor )

Creates the shape used for the sizer handle for the specified bounds an index. Only images and rectangles should be returned if support for HTML labels with not foreign objects is required.

createBounds

Helper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.

getHandleForEvent

mxVertexHandler.prototype.getHandleForEvent = function( me )

Returns the index of the handle for the given event. This returns the index of the sizer from where the event originated or <mxEvent.LABEL_INDEX>.

isCustomHandleEvent

mxVertexHandler.prototype.isCustomHandleEvent = function( me )

Returns true if the given event allows custom handles to be changed. This implementation returns true.

mouseDown

mxVertexHandler.prototype.mouseDown = function( sender,
me )

Handles the event if a handle has been clicked. By consuming the event all subsequent events of the gesture are redirected to this handler.

isLivePreviewBorder

mxVertexHandler.prototype.isLivePreviewBorder = function()

Called if livePreview is enabled to check if a border should be painted. This implementation returns true if the shape is transparent.

start

mxVertexHandler.prototype.start = function( x,
y,
index )

Starts the handling of the mouse gesture.

hideHandles

Shortcut to hideSizers.

hideSizers

mxVertexHandler.prototype.hideSizers = function()

Hides all sizers except.

Starts the handling of the mouse gesture.

checkTolerance

mxVertexHandler.prototype.checkTolerance = function( me )

Checks if the coordinates for the given event are within the mxGraph.tolerance. If the event is a mouse event then the tolerance is ignored.

updateHint

mxVertexHandler.prototype.updateHint = function( me )

Hook for subclassers do show details while the handler is active.

removeHint

mxVertexHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundAngle

mxVertexHandler.prototype.roundAngle = function( angle )

Hook for rounding the angle. This uses Math.round.

roundLength

mxVertexHandler.prototype.roundLength = function( length )

Hook for rounding the unscaled width or height. This uses Math.round.

mouseMove

mxVertexHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the preview.

rotateVertex

Rotates the vertex.

rotateVertex

mxVertexHandler.prototype.rotateVertex = function( me )

Rotates the vertex.

rotateVertex

Rotates the vertex.

updateLivePreview

mxVertexHandler.prototype.updateLivePreview = function( me )

Repaints the live preview.

mouseUp

mxVertexHandler.prototype.mouseUp = function( sender,
me )

Handles the event by applying the changes to the geometry.

rotateCell

Rotates the given cell to the given rotation.

rotateClick

mxVertexHandler.prototype.rotateClick = function()

Hook for subclassers to implement a single click on the rotation handle. This code is executed as part of the model transaction. This implementation is empty.

rotateCell

mxVertexHandler.prototype.rotateCell = function( cell,
angle,
parent )

Rotates the given cell and its children by the given angle in degrees.

Parameters

cell	mxCell to be rotated.
angle	Angle in degrees.

reset

mxVertexHandler.prototype.reset = function()

Resets the state of this handler.

resizeCell

mxVertexHandler.prototype.resizeCell = function( cell,
dx,
dy,
index,
gridEnabled,
constrained,
recurse )

Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.

moveChildren

mxVertexHandler.prototype.moveChildren = function( cell,
dx,
dy )

Moves the children of the given cell by the given vector.

union

mxVertexHandler.prototype.union = function( bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained,
centered )

Returns the union of the given bounds and location for the specified handle index.

To override this to limit the size of vertex via a minWidth/-Height style, the following code can be used.

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var result = vertexHandlerUnion.apply(this, arguments);

  result.width = Math.max(result.width, mxUtils.getNumber(this.state.style, 'minWidth', 0));
  result.height = Math.max(result.height, mxUtils.getNumber(this.state.style, 'minHeight', 0));

  return result;
};

The minWidth/-Height style can then be used as follows

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'minWidth=100;minHeight=100;');

To override this to update the height for a wrapped text if the width of a vertex is changed, the following can be used.

var mxVertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var result = mxVertexHandlerUnion.apply(this, arguments);
  var s = this.state;

  if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&
      s.text != null && s.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')
  {
    var label = this.graph.getLabel(s.cell);
    var fontSize = mxUtils.getNumber(s.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
    var ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft

    result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;
  }

  return result;
};

redraw

mxVertexHandler.prototype.redraw = function()

Redraws the handles and the preview.

redrawHandles

mxVertexHandler.prototype.redrawHandles = function()

Redraws the handles. To hide certain handles the following code can be used.

mxVertexHandler.prototype.redrawHandles = function()
{
  mxVertexHandlerRedrawHandles.apply(this, arguments);

  if (this.sizers != null && this.sizers.length > 7)
  {
    this.sizers[1].node.style.display = 'none';
    this.sizers[6].node.style.display = 'none';
  }
};

getRotationHandlePosition

mxVertexHandler.prototype.getRotationHandlePosition = function()

Returns an mxPoint that defines the rotation handle position.

updateParentHighlight

mxVertexHandler.prototype.updateParentHighlight = function()

Updates the highlight of the parent if parentHighlightEnabled is true.

drawPreview

mxVertexHandler.prototype.drawPreview = function()

Redraws the preview.

destroy

mxVertexHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxEdgeHandler

Graph event handler that reconnects edges and modifies control points and the edge label location. Uses <mxTerminalMarker> for finding and highlighting new source and target vertices. This handler is automatically created in mxGraph.createHandler for each selected edge.

To enable adding/removing control points, the following code can be used

mxEdgeHandler.prototype.addEnabled = true;
mxEdgeHandler.prototype.removeEnabled = true;

Note: This experimental feature is not recommended for production use.

Summary

Functions
mxEdgeHandler	Constructs an edge handler for the specified mxCellState.
Variables
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState being modified.
marker	Holds the <mxTerminalMarker> which is used for highlighting terminals.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while a connection is being changed.
shape	Holds the mxShape that represents the preview edge.
bends	Holds the mxShapes that represent the points.
labelShape	Holds the mxShape that represents the label position.
cloneEnabled	Specifies if cloning by control-drag is enabled.
addEnabled	Specifies if adding bends by shift-click is enabled.
removeEnabled	Specifies if removing bends by shift-click is enabled.
dblClickRemoveEnabled	Specifies if removing bends by double click is enabled.
mergeRemoveEnabled	Specifies if removing bends by dropping them on other bends is enabled.
straightRemoveEnabled	Specifies if removing bends by creating straight segments should be enabled.
virtualBendsEnabled	Specifies if virtual bends should be added in the center of each segments.
virtualBendOpacity	Opacity to be used for virtual bends (see virtualBendsEnabled).
parentHighlightEnabled	Specifies if the parent should be highlighted if a child cell is selected.
preferHtml	Specifies if bends should be added to the graph container.
allowHandleBoundsCheck	Specifies if the bounds of handles should be used for hit-detection in IE Default is true.
snapToTerminals	Specifies if waypoints should snap to the routing centers of terminals.
handleImage	Optional mxImage to be used as handles.
tolerance	Optional tolerance for hit-detection in getHandleForEvent.
outlineConnect	Specifies if connections to the outline of a highlighted target should be enabled.
manageLabelHandle	Specifies if the label handle should be moved if it intersects with another handle.
Functions
init	Initializes the shapes required for this edge handler.
createCustomHandles	Returns an array of custom handles.
isVirtualBendsEnabled	Returns true if virtual bends should be added.
isAddPointEvent	Returns true if the given event is a trigger to add a new point.
isRemovePointEvent	Returns true if the given event is a trigger to remove a point.
getSelectionPoints	Returns the list of points that defines the selection stroke.
createSelectionShape	Creates the shape used to draw the selection border.
createSelectionShape	Creates the shape used to draw the selection border.
getSelectionColor	Returns mxConstants.EDGE_SELECTION_COLOR.
getSelectionStrokeWidth	Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.
isSelectionDashed	Returns <mxConstants.EDGE_SELECTION_DASHED>.
isConnectableCell	Returns true if the given cell is connectable.
getCellAt	Creates and returns the mxCellMarker used in marker.
createMarker	Creates and returns the mxCellMarker used in marker.
validateConnection	Returns the error message or an empty string if the connection for the given source, target pair is not valid.
createBends	Creates and returns the bends used for modifying the edge.
createVirtualBends	Creates and returns the bends used for modifying the edge.
isHandleEnabled	Creates the shape used to display the given bend.
isHandleVisible	Returns true if the handle at the given index is visible.
createHandleShape	Creates the shape used to display the given bend.
createLabelHandleShape	Creates the shape used to display the the label handle.
initBend	Helper method to initialize the given bend.
getHandleForEvent	Returns the index of the handle for the given event.
isAddVirtualBendEvent	Returns true if the given event allows virtual bends to be added.
isCustomHandleEvent	Returns true if the given event allows custom handles to be changed.
mouseDown	Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
start	Starts the handling of the mouse gesture.
clonePreviewState	Returns a clone of the current preview state for the given point and terminal.
getSnapToTerminalTolerance	Returns the tolerance for the guides.
updateHint	Hook for subclassers do show details while the handler is active.
removeHint	Hooks for subclassers to hide details when the handler gets inactive.
roundLength	Hook for rounding the unscaled width or height.
isSnapToTerminalsEvent	Returns true if snapToTerminals is true and if alt is not pressed.
getPointForEvent	Returns the point for the given event.
getPreviewTerminalState	Updates the given preview state taking into account the state of the constraint handler.
getPreviewPoints	Updates the given preview state taking into account the state of the constraint handler.
isOutlineConnectEvent	Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updatePreviewState	Updates the given preview state taking into account the state of the constraint handler.
mouseMove	Handles the event by updating the preview.
mouseUp	Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
reset	Resets the state of this handler.
setPreviewColor	Sets the color of the preview to the given value.
convertPoint	Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
moveLabel	Changes the coordinates for the label of the given edge.
connect	Changes the terminal or terminal point of the given edge in the graph model.
changeTerminalPoint	Changes the terminal point of the given edge.
changePoints	Changes the control points of the given edge in the graph model.
addPoint	Adds a control point for the given state and event.
addPointAt	Adds a control point at the given point.
removePoint	Removes the control point at the given index from the given state.
getHandleFillColor	Returns the fillcolor for the handle at the given index.
redraw	Redraws the preview, and the bends- and label control points.
redrawHandles	Redraws the handles.
hideHandles	Shortcut to <hideSizers>.
redrawInnerBends	Updates and redraws the inner bends.
checkLabelHandle	Checks if the label handle intersects the given bounds and moves it if it intersects.
drawPreview	Redraws the preview.
refresh	Refreshes the bends of this handler.
destroyBends	Destroys all elements in bends.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxEdgeHandler

function mxEdgeHandler( state )

Constructs an edge handler for the specified mxCellState.

Parameters

state

mxCellState of the cell to be handled.

Variables

graph

mxEdgeHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxEdgeHandler.prototype.state

Reference to the mxCellState being modified.

marker

mxEdgeHandler.prototype.marker

Holds the <mxTerminalMarker> which is used for highlighting terminals.

constraintHandler

mxEdgeHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxEdgeHandler.prototype.error

Holds the current validation error while a connection is being changed.

shape

mxEdgeHandler.prototype.shape

Holds the mxShape that represents the preview edge.

bends

mxEdgeHandler.prototype.bends

Holds the mxShapes that represent the points.

labelShape

mxEdgeHandler.prototype.labelShape

Holds the mxShape that represents the label position.

cloneEnabled

mxEdgeHandler.prototype.cloneEnabled

Specifies if cloning by control-drag is enabled. Default is true.

addEnabled

mxEdgeHandler.prototype.addEnabled

Specifies if adding bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

removeEnabled

mxEdgeHandler.prototype.removeEnabled

Specifies if removing bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

dblClickRemoveEnabled

mxEdgeHandler.prototype.dblClickRemoveEnabled

Specifies if removing bends by double click is enabled. Default is false.

mergeRemoveEnabled

mxEdgeHandler.prototype.mergeRemoveEnabled

Specifies if removing bends by dropping them on other bends is enabled. Default is false.

straightRemoveEnabled

mxEdgeHandler.prototype.straightRemoveEnabled

Specifies if removing bends by creating straight segments should be enabled. If enabled, this can be overridden by holding down the alt key while moving. Default is false.

virtualBendsEnabled

mxEdgeHandler.prototype.virtualBendsEnabled

Specifies if virtual bends should be added in the center of each segments. These bends can then be used to add new waypoints. Default is false.

virtualBendOpacity

mxEdgeHandler.prototype.virtualBendOpacity

Opacity to be used for virtual bends (see virtualBendsEnabled). Default is 20.

parentHighlightEnabled

mxEdgeHandler.prototype.parentHighlightEnabled

Specifies if the parent should be highlighted if a child cell is selected. Default is false.

preferHtml

mxEdgeHandler.prototype.preferHtml

Specifies if bends should be added to the graph container. This is updated in init based on whether the edge or one of its terminals has an HTML label in the container.

allowHandleBoundsCheck

mxEdgeHandler.prototype.allowHandleBoundsCheck

Specifies if the bounds of handles should be used for hit-detection in IE Default is true.

snapToTerminals

mxEdgeHandler.prototype.snapToTerminals

Specifies if waypoints should snap to the routing centers of terminals. Default is false.

handleImage

mxEdgeHandler.prototype.handleImage

Optional mxImage to be used as handles. Default is null.

tolerance

mxEdgeHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent. Default is 0.

outlineConnect

mxEdgeHandler.prototype.outlineConnect

Specifies if connections to the outline of a highlighted target should be enabled. This will allow to place the connection point along the outline of the highlighted target. Default is false.

manageLabelHandle

mxEdgeHandler.prototype.manageLabelHandle

Specifies if the label handle should be moved if it intersects with another handle. Uses checkLabelHandle for checking and moving. Default is false.

Functions

init

mxEdgeHandler.prototype.init = function()

Initializes the shapes required for this edge handler.

createCustomHandles

mxEdgeHandler.prototype.createCustomHandles = function()

Returns an array of custom handles. This implementation returns null.

isVirtualBendsEnabled

mxEdgeHandler.prototype.isVirtualBendsEnabled = function( evt )

Returns true if virtual bends should be added. This returns true if virtualBendsEnabled is true and the current style allows and renders custom waypoints.

isAddPointEvent

mxEdgeHandler.prototype.isAddPointEvent = function( evt )

Returns true if the given event is a trigger to add a new point. This implementation returns true if shift is pressed.

isRemovePointEvent

mxEdgeHandler.prototype.isRemovePointEvent = function( evt )

Returns true if the given event is a trigger to remove a point. This implementation returns true if shift is pressed.

getSelectionPoints

mxEdgeHandler.prototype.getSelectionPoints = function( state )

Returns the list of points that defines the selection stroke.

createSelectionShape

Creates the shape used to draw the selection border.

createSelectionShape

mxEdgeHandler.prototype.createSelectionShape = function( points )

Creates the shape used to draw the selection border.

getSelectionColor

mxEdgeHandler.prototype.getSelectionColor = function()

Returns mxConstants.EDGE_SELECTION_COLOR.

getSelectionStrokeWidth

mxEdgeHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.

isSelectionDashed

mxEdgeHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.EDGE_SELECTION_DASHED>.

isConnectableCell

mxEdgeHandler.prototype.isConnectableCell = function( cell )

Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.

getCellAt

mxEdgeHandler.prototype.getCellAt = function( x,
y )

Creates and returns the mxCellMarker used in marker.

createMarker

mxEdgeHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

validateConnection

mxEdgeHandler.prototype.validateConnection = function( source,
target )

Returns the error message or an empty string if the connection for the given source, target pair is not valid. Otherwise it returns null. This implementation uses mxGraph.getEdgeValidationError.

Parameters

source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

createBends

mxEdgeHandler.prototype.createBends = function()

Creates and returns the bends used for modifying the edge. This is typically an array of mxRectangleShapes.

createVirtualBends

mxEdgeHandler.prototype.createVirtualBends = function()

Creates and returns the bends used for modifying the edge. This is typically an array of mxRectangleShapes.

isHandleEnabled

mxEdgeHandler.prototype.isHandleEnabled = function( index )

Creates the shape used to display the given bend.

isHandleVisible

mxEdgeHandler.prototype.isHandleVisible = function( index )

Returns true if the handle at the given index is visible.

createHandleShape

mxEdgeHandler.prototype.createHandleShape = function( index )

Creates the shape used to display the given bend. Note that the index may be null for special cases, such as when called from mxElbowEdgeHandler.createVirtualBend. Only images and rectangles should be returned if support for HTML labels with not foreign objects is required. Index if null for virtual handles.

createLabelHandleShape

mxEdgeHandler.prototype.createLabelHandleShape = function()

Creates the shape used to display the the label handle.

initBend

mxEdgeHandler.prototype.initBend = function( bend,
dblClick )

Helper method to initialize the given bend.

Parameters

bend	mxShape that represents the bend to be initialized.

getHandleForEvent

mxEdgeHandler.prototype.getHandleForEvent = function( me )

Returns the index of the handle for the given event.

isAddVirtualBendEvent

mxEdgeHandler.prototype.isAddVirtualBendEvent = function( me )

Returns true if the given event allows virtual bends to be added. This implementation returns true.

isCustomHandleEvent

mxEdgeHandler.prototype.isCustomHandleEvent = function( me )

Returns true if the given event allows custom handles to be changed. This implementation returns true.

mouseDown

mxEdgeHandler.prototype.mouseDown = function( sender,
me )

Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null. The indices may be one of <LABEL_HANDLE> or the number of the respective control point. The source and target points are used for reconnecting the edge.

start

mxEdgeHandler.prototype.start = function( x,
y,
index )

Starts the handling of the mouse gesture.

clonePreviewState

mxEdgeHandler.prototype.clonePreviewState = function( point,
terminal )

Returns a clone of the current preview state for the given point and terminal.

getSnapToTerminalTolerance

mxEdgeHandler.prototype.getSnapToTerminalTolerance = function()

Returns the tolerance for the guides. Default value is gridSize * scale / 2.

updateHint

mxEdgeHandler.prototype.updateHint = function( me,
point )

Hook for subclassers do show details while the handler is active.

removeHint

mxEdgeHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundLength

mxEdgeHandler.prototype.roundLength = function( length )

Hook for rounding the unscaled width or height. This uses Math.round.

isSnapToTerminalsEvent

mxEdgeHandler.prototype.isSnapToTerminalsEvent = function( me )

Returns true if snapToTerminals is true and if alt is not pressed.

getPointForEvent

mxEdgeHandler.prototype.getPointForEvent = function( me )

Returns the point for the given event.

getPreviewTerminalState

mxEdgeHandler.prototype.getPreviewTerminalState = function( me )

Updates the given preview state taking into account the state of the constraint handler.

getPreviewPoints

mxEdgeHandler.prototype.getPreviewPoints = function( pt,
me )

Updates the given preview state taking into account the state of the constraint handler.

Parameters

pt	mxPoint that contains the current pointer position.
me	Optional mxMouseEvent that contains the current event.

isOutlineConnectEvent

mxEdgeHandler.prototype.isOutlineConnectEvent = function( me )

Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.

updatePreviewState

mxEdgeHandler.prototype.updatePreviewState = function( edge,
point,
terminalState,
me,
outline )

Updates the given preview state taking into account the state of the constraint handler.

mouseMove

mxEdgeHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the preview.

mouseUp

mxEdgeHandler.prototype.mouseUp = function( sender,
me )

Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.

reset

mxEdgeHandler.prototype.reset = function()

Resets the state of this handler.

setPreviewColor

mxEdgeHandler.prototype.setPreviewColor = function( color )

Sets the color of the preview to the given value.

convertPoint

mxEdgeHandler.prototype.convertPoint = function( point,
gridEnabled )

Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid. Returns the given, modified point instance.

Parameters

point	mxPoint to be converted.
gridEnabled	Boolean that specifies if the grid should be applied.

moveLabel

mxEdgeHandler.prototype.moveLabel = function( edgeState,
x,
y )

Changes the coordinates for the label of the given edge.

Parameters

edge	mxCell that represents the edge.
x	Integer that specifies the x-coordinate of the new location.
y	Integer that specifies the y-coordinate of the new location.

connect

mxEdgeHandler.prototype.connect = function( edge,
terminal,
isSource,
isClone,
me )

Changes the terminal or terminal point of the given edge in the graph model.

Parameters

edge	mxCell that represents the edge to be reconnected.
terminal	mxCell that represents the new terminal.
isSource	Boolean indicating if the new terminal is the source or target terminal.
isClone	Boolean indicating if the new connection should be a clone of the old edge.
me	mxMouseEvent that contains the mouse up event.

changeTerminalPoint

mxEdgeHandler.prototype.changeTerminalPoint = function( edge,
point,
isSource,
clone )

Changes the terminal point of the given edge.

changePoints

mxEdgeHandler.prototype.changePoints = function( edge,
points,
clone )

Changes the control points of the given edge in the graph model.

addPoint

mxEdgeHandler.prototype.addPoint = function( state,
evt )

Adds a control point for the given state and event.

addPointAt

mxEdgeHandler.prototype.addPointAt = function( state,
x,
y )

Adds a control point at the given point.

removePoint

mxEdgeHandler.prototype.removePoint = function( state,
index )

Removes the control point at the given index from the given state.

getHandleFillColor

mxEdgeHandler.prototype.getHandleFillColor = function( index )

Returns the fillcolor for the handle at the given index.

redraw

mxEdgeHandler.prototype.redraw = function()

Redraws the preview, and the bends- and label control points.

redrawHandles

mxEdgeHandler.prototype.redrawHandles = function()

Redraws the handles.

hideHandles

Shortcut to <hideSizers>.

redrawInnerBends

mxEdgeHandler.prototype.redrawInnerBends = function( p0,
pe )

Updates and redraws the inner bends.

Parameters

p0	mxPoint that represents the location of the first point.
pe	mxPoint that represents the location of the last point.

checkLabelHandle

mxEdgeHandler.prototype.checkLabelHandle = function( b )

Checks if the label handle intersects the given bounds and moves it if it intersects.

drawPreview

mxEdgeHandler.prototype.drawPreview = function()

Redraws the preview.

refresh

mxEdgeHandler.prototype.refresh = function()

Refreshes the bends of this handler.

destroyBends

mxEdgeHandler.prototype.destroyBends = function( bends )

Destroys all elements in bends.

destroy

mxEdgeHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes. This does normally not need to be called as handlers are destroyed automatically when the corresponding cell is deselected.

mxElbowEdgeHandler

Summary

Functions
mxEdgeHandler	Constructs an edge handler for the specified mxCellState.
Variables
doubleClickOrientationResource	Specifies the resource key for the tooltip to be displayed on the single control point for routed edges.
Functions
createBends	Overrides mxEdgeHandler.createBends to create custom bends.
createVirtualBend	Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
getCursorForBend	Returns the cursor to be used for the bend.
getTooltipForNode	Returns the tooltip for the given node.
convertPoint	Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
redrawInnerBends	Updates and redraws the inner bends.
getCurrentPoints	Returns the current absolute points.
getPreviewPoints	Updates the given preview state taking into account the state of the constraint handler.
updatePreviewState	Overridden to perform optimization of the edge style result.
getTooltipForNode	Returns no tooltips.
createBends	Adds custom bends for the center of each segment.
createBends	Adds custom bends for the center of each segment.
redraw	Overridden to invoke <refresh> before the redraw.
redrawInnerBends	Updates the position of the custom bends.

Functions

mxEdgeHandler

Constructs an edge handler for the specified mxCellState.

Parameters

state

mxCellState of the cell to be modified.

Variables

doubleClickOrientationResource

mxElbowEdgeHandler.prototype.doubleClickOrientationResource

Specifies the resource key for the tooltip to be displayed on the single control point for routed edges. If the resource for this key does not exist then the value is used as the error message. Default is ‘doubleClickOrientation’.

Functions

createBends

mxElbowEdgeHandler.prototype.createBends = function()

Overrides mxEdgeHandler.createBends to create custom bends.

createVirtualBend

mxElbowEdgeHandler.prototype.createVirtualBend = function( dblClickHandler )

Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.

getCursorForBend

mxElbowEdgeHandler.prototype.getCursorForBend = function()

Returns the cursor to be used for the bend.

getTooltipForNode

mxElbowEdgeHandler.prototype.getTooltipForNode = function( node )

Returns the tooltip for the given node.

convertPoint

mxElbowEdgeHandler.prototype.convertPoint = function( point,
gridEnabled )

Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.

Parameters

point	mxPoint to be converted.
gridEnabled	Boolean that specifies if the grid should be applied.

redrawInnerBends

mxElbowEdgeHandler.prototype.redrawInnerBends = function( p0,
pe )

Updates and redraws the inner bends.

Parameters

p0	mxPoint that represents the location of the first point.
pe	mxPoint that represents the location of the last point.

getCurrentPoints

mxEdgeSegmentHandler.prototype.getCurrentPoints = function()

Returns the current absolute points.

getPreviewPoints

mxEdgeSegmentHandler.prototype.getPreviewPoints = function( point )

Updates the given preview state taking into account the state of the constraint handler.

updatePreviewState

mxEdgeSegmentHandler.prototype.updatePreviewState = function( edge,
point,
terminalState,
me )

Overridden to perform optimization of the edge style result.

getTooltipForNode

mxEdgeSegmentHandler.prototype.getTooltipForNode = function( node )

Returns no tooltips.

createBends

Adds custom bends for the center of each segment.

createBends

mxEdgeSegmentHandler.prototype.createBends = function()

Adds custom bends for the center of each segment.

redraw

mxEdgeSegmentHandler.prototype.redraw = function()

Overridden to invoke <refresh> before the redraw.

redrawInnerBends

mxEdgeSegmentHandler.prototype.redrawInnerBends = function( p0,
pe )

Updates the position of the custom bends.

mxKeyHandler

Event handler that listens to keystroke events. This is not a singleton, however, it is normally only required once if the target is the document element (default).

This handler installs a key event listener in the topmost DOM node and processes all events that originate from descandants of <mxGraph.container> or from the topmost DOM node. The latter means that all unhandled keystrokes are handled by this object regardless of the focused state of the graph.

Example

The following example creates a key handler that listens to the delete key (46) and deletes the selection cells if the graph is enabled.

var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(46, function(evt)
{
  if (graph.isEnabled())
  {
    graph.removeCells();
  }
});

Keycodes

See http://tinyurl.com/yp8jgl or http://tinyurl.com/229yqw for a list of keycodes or install a key event listener into the document element and print the key codes of the respective events to the console.

To support the Command key and the Control key on the Mac, the following code can be used.

keyHandler.getFunction = function(evt)
{
  if (evt != null)
  {
    return (mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey)) ? this.controlKeys[evt.keyCode] : this.normalKeys[evt.keyCode];
  }

  return null;
};

Summary

Functions
mxKeyHandler	Constructs an event handler that executes functions bound to specific keystrokes.
Variables
graph	Reference to the mxGraph associated with this handler.
target	Reference to the target DOM, that is, the DOM node where the key event listeners are installed.
normalKeys	Maps from keycodes to functions for non-pressed control keys.
shiftKeys	Maps from keycodes to functions for pressed shift keys.
controlKeys	Maps from keycodes to functions for pressed control keys.
controlShiftKeys	Maps from keycodes to functions for pressed control and shift keys.
enabled	Specifies if events are handled.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling by updating enabled.
bindKey	Binds the specified keycode to the given function.
bindShiftKey	Binds the specified keycode to the given function.
bindControlKey	Binds the specified keycode to the given function.
bindControlShiftKey	Binds the specified keycode to the given function.
isControlDown	Returns true if the control key is pressed.
getFunction	Returns the function associated with the given key event or null if no function is associated with the given event.
isGraphEvent	Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.
keyDown	Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.
isEnabledForEvent	Returns true if the given event should be handled.
isEventIgnored	Returns true if the given keystroke should be ignored.
escape	Hook to process ESCAPE keystrokes.
destroy	Destroys the handler and all its references into the DOM.

Functions

mxKeyHandler

function mxKeyHandler( graph,
target )

Constructs an event handler that executes functions bound to specific keystrokes.

Parameters

graph	Reference to the associated mxGraph.
target	Optional reference to the event target. If null, the document element is used as the event target, that is, the object where the key event listener is installed.

Variables

graph

mxKeyHandler.prototype.graph

Reference to the mxGraph associated with this handler.

target

mxKeyHandler.prototype.target

Reference to the target DOM, that is, the DOM node where the key event listeners are installed.

normalKeys

mxKeyHandler.prototype.normalKeys

Maps from keycodes to functions for non-pressed control keys.

shiftKeys

mxKeyHandler.prototype.shiftKeys

Maps from keycodes to functions for pressed shift keys.

controlKeys

mxKeyHandler.prototype.controlKeys

Maps from keycodes to functions for pressed control keys.

controlShiftKeys

mxKeyHandler.prototype.controlShiftKeys

Maps from keycodes to functions for pressed control and shift keys.

enabled

mxKeyHandler.prototype.enabled

Specifies if events are handled. Default is true.

Functions

isEnabled

mxKeyHandler.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxKeyHandler.prototype.setEnabled = function( enabled )

Enables or disables event handling by updating enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

bindKey

mxKeyHandler.prototype.bindKey = function( code,
funct )

Binds the specified keycode to the given function. This binding is used if the control key is not pressed.

Parameters

code	Integer that specifies the keycode.
funct	JavaScript function that takes the key event as an argument.

bindShiftKey

mxKeyHandler.prototype.bindShiftKey = function( code,
funct )

Binds the specified keycode to the given function. This binding is used if the shift key is pressed.

Parameters

code	Integer that specifies the keycode.
funct	JavaScript function that takes the key event as an argument.

bindControlKey

mxKeyHandler.prototype.bindControlKey = function( code,
funct )

Binds the specified keycode to the given function. This binding is used if the control key is pressed.

Parameters

code	Integer that specifies the keycode.
funct	JavaScript function that takes the key event as an argument.

bindControlShiftKey

mxKeyHandler.prototype.bindControlShiftKey = function( code,
funct )

Binds the specified keycode to the given function. This binding is used if the control and shift key are pressed.

Parameters

code	Integer that specifies the keycode.
funct	JavaScript function that takes the key event as an argument.

isControlDown

mxKeyHandler.prototype.isControlDown = function( evt )

Returns true if the control key is pressed. This uses mxEvent.isControlDown.

Parameters

evt	Key event whose control key pressed state should be returned.

getFunction

mxKeyHandler.prototype.getFunction = function( evt )

Returns the function associated with the given key event or null if no function is associated with the given event.

Parameters

evt	Key event whose associated function should be returned.

isGraphEvent

mxKeyHandler.prototype.isGraphEvent = function( evt )

Returns true if the event should be processed by this handler, that is, if the event source is either the target, one of its direct children, a descendant of the <mxGraph.container>, or the mxGraph.cellEditor of the graph.

Parameters

evt	Key event that represents the keystroke.

keyDown

mxKeyHandler.prototype.keyDown = function( evt )

Handles the event by invoking the function bound to the respective keystroke if isEnabledForEvent returns true for the given event and if isEventIgnored returns false, except for escape for which isEventIgnored is not invoked.

Parameters

evt	Key event that represents the keystroke.

isEnabledForEvent

mxKeyHandler.prototype.isEnabledForEvent = function( evt )

Returns true if the given event should be handled. isEventIgnored is called later if the event is not an escape key stroke, in which case escape is called. This implementation returns true if isEnabled returns true for both, this handler and graph, if the event is not consumed and if isGraphEvent returns true.

Parameters

evt	Key event that represents the keystroke.

isEventIgnored

mxKeyHandler.prototype.isEventIgnored = function( evt )

Returns true if the given keystroke should be ignored. This returns graph.isEditing().

Parameters

evt	Key event that represents the keystroke.

escape

mxKeyHandler.prototype.escape = function( evt )

Hook to process ESCAPE keystrokes. This implementation invokes mxGraph.stopEditing to cancel the current editing, connecting and/or other ongoing modifications.

Parameters

evt	Key event that represents the keystroke. Possible keycode in this case is 27 (ESCAPE).

destroy

mxKeyHandler.prototype.destroy = function()

Destroys the handler and all its references into the DOM. This does normally not need to be called, it is called automatically when the window unloads (in IE).

mxTooltipHandler

Graph event handler that displays tooltips. mxGraph.getTooltip is used to get the tooltip for a cell or handle. This handler is built-into <mxGraph.tooltipHandler> and enabled using mxGraph.setTooltips.

Example

(code> new mxTooltipHandler(graph); (end)

Summary

Functions
mxTooltipHandler	Constructs an event handler that displays tooltips with the specified delay (in milliseconds).
Variables
zIndex	Specifies the zIndex for the tooltip and its shadow.
graph	Reference to the enclosing mxGraph.
delay	Delay to show the tooltip in milliseconds.
ignoreTouchEvents	Specifies if touch and pen events should be ignored.
hideOnHover	Specifies if the tooltip should be hidden if the mouse is moved over the current cell.
destroyed	True if this handler was destroyed using destroy.
enabled	Specifies if events are handled.
Functions
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isHideOnHover	Returns hideOnHover.
setHideOnHover	Sets hideOnHover.
init	Initializes the DOM nodes required for this tooltip handler.
getStateForEvent	Returns the mxCellState to be used for showing a tooltip for this event.
mouseDown	Handles the event by initiating a rubberband selection.
mouseMove	Handles the event by updating the rubberband selection.
mouseUp	Handles the event by resetting the tooltip timer or hiding the existing tooltip.
resetTimer	Resets the timer.
reset	Resets and/or restarts the timer to trigger the display of the tooltip.
hide	Hides the tooltip and resets the timer.
hideTooltip	Hides the tooltip.
show	Shows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxTooltipHandler

function mxTooltipHandler( graph,
delay )

Constructs an event handler that displays tooltips with the specified delay (in milliseconds). If no delay is specified then a default delay of 500 ms (0.5 sec) is used.

Parameters

graph	Reference to the enclosing mxGraph.
delay	Optional delay in milliseconds.

Variables

zIndex

mxTooltipHandler.prototype.zIndex

Specifies the zIndex for the tooltip and its shadow. Default is 10005.

graph

mxTooltipHandler.prototype.graph

Reference to the enclosing mxGraph.

delay

mxTooltipHandler.prototype.delay

Delay to show the tooltip in milliseconds. Default is 500.

ignoreTouchEvents

mxTooltipHandler.prototype.ignoreTouchEvents

Specifies if touch and pen events should be ignored. Default is true.

hideOnHover

mxTooltipHandler.prototype.hideOnHover

Specifies if the tooltip should be hidden if the mouse is moved over the current cell. Default is false.

destroyed

mxTooltipHandler.prototype.destroyed

True if this handler was destroyed using destroy.

enabled

mxTooltipHandler.prototype.enabled

Specifies if events are handled. Default is true.

Functions

isEnabled

mxTooltipHandler.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxTooltipHandler.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

isHideOnHover

mxTooltipHandler.prototype.isHideOnHover = function()

Returns hideOnHover.

setHideOnHover

mxTooltipHandler.prototype.setHideOnHover = function( value )

Sets hideOnHover.

init

mxTooltipHandler.prototype.init = function()

Initializes the DOM nodes required for this tooltip handler.

getStateForEvent

mxTooltipHandler.prototype.getStateForEvent = function( me )

Returns the mxCellState to be used for showing a tooltip for this event.

mouseDown

mxTooltipHandler.prototype.mouseDown = function( sender,
me )

Handles the event by initiating a rubberband selection. By consuming the event all subsequent events of the gesture are redirected to this handler.

mouseMove

mxTooltipHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the rubberband selection.

mouseUp

mxTooltipHandler.prototype.mouseUp = function( sender,
me )

Handles the event by resetting the tooltip timer or hiding the existing tooltip.

resetTimer

mxTooltipHandler.prototype.resetTimer = function()

Resets the timer.

reset

mxTooltipHandler.prototype.reset = function( me,
restart,
state )

Resets and/or restarts the timer to trigger the display of the tooltip.

hide

mxTooltipHandler.prototype.hide = function()

Hides the tooltip and resets the timer.

hideTooltip

mxTooltipHandler.prototype.hideTooltip = function()

Hides the tooltip.

show

mxTooltipHandler.prototype.show = function( tip,
x,
y )

Shows the tooltip for the specified cell and optional index at the specified location (with a vertical offset of 10 pixels).

destroy

mxTooltipHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxCellTracker

Event handler that highlights cells. Inherits from mxCellMarker.

Example

new mxCellTracker(graph, '#00FF00');

For detecting dragEnter, dragOver and dragLeave on cells, the following code can be used:

graph.addMouseListener(
{
  cell: null,
  mouseDown: function(sender, me) { },
  mouseMove: function(sender, me)
  {
    var tmp = me.getCell();

    if (tmp != this.cell)
    {
      if (this.cell != null)
      {
        this.dragLeave(me.getEvent(), this.cell);
      }

      this.cell = tmp;

      if (this.cell != null)
      {
        this.dragEnter(me.getEvent(), this.cell);
      }
    }

    if (this.cell != null)
    {
      this.dragOver(me.getEvent(), this.cell);
    }
  },
  mouseUp: function(sender, me) { },
  dragEnter: function(evt, cell)
  {
    mxLog.debug('dragEnter', cell.value);
  },
  dragOver: function(evt, cell)
  {
    mxLog.debug('dragOver', cell.value);
  },
  dragLeave: function(evt, cell)
  {
    mxLog.debug('dragLeave', cell.value);
  }
});

Summary

Functions
mxCellTracker	Constructs an event handler that highlights cells.
mouseDown	Ignores the event.
mouseMove	Handles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.
mouseUp	Handles the event by reseting the highlight.
destroy	Destroys the object and all its resources and DOM nodes.

Functions

mxCellTracker

function mxCellTracker( graph,
color,
funct )

Constructs an event handler that highlights cells.

Parameters

graph	Reference to the enclosing mxGraph.
color	Color of the highlight. Default is blue.
funct	Optional JavaScript function that is used to override mxCellMarker.getCell.

mouseDown

mxCellTracker.prototype.mouseDown = function( sender,
me )

Ignores the event. The event is not consumed.

mouseMove

mxCellTracker.prototype.mouseMove = function( sender,
me )

Handles the event by highlighting the cell under the mousepointer if it is over the hotspot region of the cell.

mouseUp

mxCellTracker.prototype.mouseUp = function( sender,
me )

Handles the event by reseting the highlight.

destroy

mxCellTracker.prototype.destroy = function()

Destroys the object and all its resources and DOM nodes. This doesn’t normally need to be called. It is called automatically when the window unloads.

mxCellHighlight

A helper class to highlight cells. Here is an example for a given cell.

var highlight = new mxCellHighlight(graph, '#ff0000', 2);
highlight.highlight(graph.view.getState(cell)));

Summary

Functions
mxCellHighlight	Constructs a cell highlight.
Variables
keepOnTop	Specifies if the highlights should appear on top of everything else in the overlay pane.
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState.
spacing	Specifies the spacing between the highlight for vertices and the vertex.
resetHandler	Holds the handler that automatically invokes reset if the highlight should be hidden.
Functions
setHighlightColor	Sets the color of the rectangle used to highlight drop targets.
drawHighlight	Creates and returns the highlight shape for the given state.
createShape	Creates and returns the highlight shape for the given state.
repaint	Updates the highlight after a change of the model or view.
repaint	Updates the highlight after a change of the model or view.
hide	Resets the state of the cell marker.
mark	Marks the <markedState> and fires a mark event.
isHighlightAt	Returns true if this highlight is at the given position.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxCellHighlight

function mxCellHighlight( graph,
highlightColor,
strokeWidth,
dashed )

Constructs a cell highlight.

Variables

keepOnTop

mxCellHighlight.prototype.keepOnTop

Specifies if the highlights should appear on top of everything else in the overlay pane. Default is false.

graph

mxCellHighlight.prototype.graph

Reference to the enclosing mxGraph.

state

mxCellHighlight.prototype.state

Reference to the mxCellState.

spacing

mxCellHighlight.prototype.spacing

Specifies the spacing between the highlight for vertices and the vertex. Default is 2.

resetHandler

mxCellHighlight.prototype.resetHandler

Holds the handler that automatically invokes reset if the highlight should be hidden.

Functions

setHighlightColor

mxCellHighlight.prototype.setHighlightColor = function( color )

Sets the color of the rectangle used to highlight drop targets.

Parameters

color

String that represents the new highlight color.

drawHighlight

mxCellHighlight.prototype.drawHighlight = function()

Creates and returns the highlight shape for the given state.

createShape

mxCellHighlight.prototype.createShape = function()

Creates and returns the highlight shape for the given state.

repaint

Updates the highlight after a change of the model or view.

repaint

mxCellHighlight.prototype.repaint = function()

Updates the highlight after a change of the model or view.

hide

mxCellHighlight.prototype.hide = function()

Resets the state of the cell marker.

mark

Marks the <markedState> and fires a mark event.

isHighlightAt

mxCellHighlight.prototype.isHighlightAt = function( x,
y )

Returns true if this highlight is at the given position.

destroy

mxCellHighlight.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

mxDefaultKeyHandler

Binds keycodes to actionnames in an editor. This aggregates an internal handler and extends the implementation of mxKeyHandler.escape to not only cancel the editing, but also hide the properties dialog and fire an <mxEditor.escape> event via editor. An instance of this class is created by mxEditor and stored in mxEditor.keyHandler.

Example

Bind the delete key to the delete action in an existing editor.

var keyHandler = new mxDefaultKeyHandler(editor);
keyHandler.bindAction(46, 'delete');

Codec

This class uses the mxDefaultKeyHandlerCodec to read configuration data into an existing instance. See mxDefaultKeyHandlerCodec for a description of the configuration format.

Keycodes

See mxKeyHandler.

An mxEvent.ESCAPE event is fired via the editor if the escape key is pressed.

Summary

Functions
mxDefaultKeyHandler	Constructs a new default key handler for the mxEditor.graph in the given mxEditor.
Variables
editor	Reference to the enclosing mxEditor.
handler	Holds the mxKeyHandler for key event handling.
Functions
bindAction	Binds the specified keycode to the given action in editor.
destroy	Destroys the handler associated with this object.

Functions

mxDefaultKeyHandler

function mxDefaultKeyHandler( editor )

Constructs a new default key handler for the mxEditor.graph in the given mxEditor. (The editor may be null if a prototypical instance for a mxDefaultKeyHandlerCodec is created.)

Parameters

editor

Reference to the enclosing mxEditor.

Variables

editor

mxDefaultKeyHandler.prototype.editor

Reference to the enclosing mxEditor.

handler

mxDefaultKeyHandler.prototype.handler

Holds the mxKeyHandler for key event handling.

Functions

bindAction

mxDefaultKeyHandler.prototype.bindAction = function ( code,
action,
control )

Binds the specified keycode to the given action in editor. The optional control flag specifies if the control key must be pressed to trigger the action.

Parameters

code	Integer that specifies the keycode.
action	Name of the action to execute in editor.
control	Optional boolean that specifies if control must be pressed. Default is false.

destroy

mxDefaultKeyHandler.prototype.destroy = function ()

Destroys the handler associated with this object. This does normally not need to be called, the handler is destroyed automatically when the window unloads (in IE) by mxEditor.

mxDefaultPopupMenu

Creates popupmenus for mouse events. This object holds an XML node which is a description of the popup menu to be created. In createMenu, the configuration is applied to the context and the resulting menu items are added to the menu dynamically. See createMenu for a description of the configuration format.

This class does not create the DOM nodes required for the popup menu, it only parses an XML description to invoke the respective methods on an mxPopupMenu each time the menu is displayed.

Codec

This class uses the mxDefaultPopupMenuCodec to read configuration data into an existing instance, however, the actual parsing is done by this class during program execution, so the format is described below.

Summary

Functions
mxDefaultPopupMenu	Constructs a new popupmenu-factory based on given configuration.
Variables
imageBasePath	Base path for all icon attributes in the config.
config	XML node used as the description of new menu items.
Functions
createMenu	This function is called from mxEditor to add items to the given menu based on config.
addItems	Recursively adds the given items and all of its children into the given menu.
addAction	Helper method to bind an action to a new menu item.
createConditions	Evaluates the default conditions for the given context.

Functions

mxDefaultPopupMenu

function mxDefaultPopupMenu( config )

Constructs a new popupmenu-factory based on given configuration.

Paramaters

config

XML node that contains the configuration data.

Variables

imageBasePath

mxDefaultPopupMenu.prototype.imageBasePath

Base path for all icon attributes in the config. Default is null.

config

mxDefaultPopupMenu.prototype.config

XML node used as the description of new menu items. This node is used in createMenu to dynamically create the menu items if their respective conditions evaluate to true for the given arguments.

Functions

createMenu

mxDefaultPopupMenu.prototype.createMenu = function( editor,
menu,
cell,
evt )

This function is called from mxEditor to add items to the given menu based on config. The config is a sequence of the following nodes and attributes.

Child Nodes

add	Adds a new menu item. See below for attributes.
separator	Adds a separator. No attributes.
condition	Adds a custom condition. Name attribute.

The add-node may have a child node that defines a function to be invoked before the action is executed (or instead of an action to be executed).

Attributes

as	Resource key for the label (needs entry in property file).
action	Name of the action to execute in enclosing editor.
icon	Optional icon (relative/absolute URL).
iconCls	Optional CSS class for the icon.
if	Optional name of condition that must be true (see below).
enabled-if	Optional name of condition that specifies if the menu item should be enabled.
name	Name of custom condition. Only for condition nodes.

Conditions

nocell	No cell under the mouse.
ncells	More than one cell selected.
notRoot	Drilling position is other than home.
cell	Cell under the mouse.
notEmpty	Exactly one cell with children under mouse.
expandable	Exactly one expandable cell under mouse.
collapsable	Exactly one collapsable cell under mouse.
validRoot	Exactly one cell which is a possible root under mouse.
swimlane	Exactly one cell which is a swimlane under mouse.

Example

To add a new item for a given action to the popupmenu

<mxDefaultPopupMenu as="popupHandler">
  <add as="delete" action="delete" icon="images/delete.gif" if="cell"/>
</mxDefaultPopupMenu>

To add a new item for a custom function

<mxDefaultPopupMenu as="popupHandler">
  <add as="action1"><![CDATA[
     function (editor, cell, evt)
     {
         editor.execute('action1', cell, 'myArg');
     }
  ]]></add>
</mxDefaultPopupMenu>

The above example invokes action1 with an additional third argument via the editor instance. The third argument is passed to the function that defines action1. If the add-node has no action-attribute, then only the function defined in the text content is executed, otherwise first the function and then the action defined in the action-attribute is executed. The function in the text content has 3 arguments, namely the mxEditor instance, the mxCell instance under the mouse, and the native mouse event.

Custom Conditions

To add a new condition for popupmenu items

<condition name="condition1"><![CDATA[
  function (editor, cell, evt)
  {
    return cell != null;
  }
]]></condition>

The new condition can then be used in any item as follows

<add as="action1" action="action1" icon="action1.gif" if="condition1"/>

The order in which the items and conditions appear is not significant as all connditions are evaluated before any items are created.

Parameters

editor	Enclosing mxEditor instance.
menu	mxPopupMenu that is used for adding items and separators.
cell	Optional mxCell which is under the mousepointer.
evt	Optional mouse event which triggered the menu.

addItems

mxDefaultPopupMenu.prototype.addItems = function( editor,
menu,
cell,
evt,
conditions,
item,
parent )

Recursively adds the given items and all of its children into the given menu.

Parameters

editor	Enclosing mxEditor instance.
menu	mxPopupMenu that is used for adding items and separators.
cell	Optional mxCell which is under the mousepointer.
evt	Optional mouse event which triggered the menu.
conditions	Array of names boolean conditions.
item	XML node that represents the current menu item.
parent	DOM node that represents the parent menu item.

addAction

mxDefaultPopupMenu.prototype.addAction = function( menu,
editor,
lab,
icon,
funct,
action,
cell,
parent,
iconCls,
enabled )

Helper method to bind an action to a new menu item.

Parameters

menu	mxPopupMenu that is used for adding items and separators.
editor	Enclosing mxEditor instance.
lab	String that represents the label of the menu item.
icon	Optional URL that represents the icon of the menu item.
action	Optional name of the action to execute in the given editor.
funct	Optional function to execute before the optional action. The function takes an mxEditor, the mxCell under the mouse and the mouse event that triggered the call.
cell	Optional mxCell to use as an argument for the action.
parent	DOM node that represents the parent menu item.
iconCls	Optional CSS class for the menu icon.
enabled	Optional boolean that specifies if the menu item is enabled. Default is true.

createConditions

mxDefaultPopupMenu.prototype.createConditions = function( editor,
cell,
evt )

Evaluates the default conditions for the given context.

mxDefaultToolbar

Toolbar for the editor. This modifies the state of the graph or inserts new cells upon mouse clicks.

Example

Create a toolbar with a button to copy the selection into the clipboard, and a combo box with one action to paste the selection from the clipboard into the graph.

var toolbar = new mxDefaultToolbar(container, editor);
toolbar.addItem('Copy', null, 'copy');

var combo = toolbar.addActionCombo('More actions...');
toolbar.addActionOption(combo, 'Paste', 'paste');

Codec

This class uses the mxDefaultToolbarCodec to read configuration data into an existing instance. See mxDefaultToolbarCodec for a description of the configuration format.

Summary

Functions
mxDefaultToolbar	Constructs a new toolbar for the given container and editor.
Variables
editor	Reference to the enclosing mxEditor.
toolbar	Holds the internal mxToolbar.
resetHandler	Reference to the function used to reset the toolbar.
spacing	Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell.
connectOnDrop	Specifies if elements should be connected if new cells are dropped onto connectable elements.
init	Constructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar.
Functions
addItem	Adds a new item that executes the given action in editor.
addSeparator	Adds a vertical separator using the optional icon.
addCombo	Helper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.
addActionCombo	Helper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.
addActionOption	Binds the given action to a option with the specified label in the given combo.
addOption	Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.
addMode	Creates an item for selecting the given mode in the editor’s graph.
addPrototype	Creates an item for inserting a clone of the specified prototype cell into the editor’s graph.
drop	Handles a drop from a toolbar item to the graph.
insert	Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.
connect	Handles a drop by connecting the given vertex to the given source cell.
installDropHandler	Makes the given img draggable using the given function for handling a drop event.
destroy	Destroys the toolbar associated with this object and removes all installed listeners.

Functions

mxDefaultToolbar

function mxDefaultToolbar( container,
editor )

Constructs a new toolbar for the given container and editor. The container and editor may be null if a prototypical instance for a mxDefaultKeyHandlerCodec is created.

Parameters

container	DOM node that contains the toolbar.
editor	Reference to the enclosing mxEditor.

Variables

editor

mxDefaultToolbar.prototype.editor

Reference to the enclosing mxEditor.

toolbar

mxDefaultToolbar.prototype.toolbar

Holds the internal mxToolbar.

resetHandler

mxDefaultToolbar.prototype.resetHandler

Reference to the function used to reset the toolbar.

spacing

mxDefaultToolbar.prototype.spacing

Defines the spacing between existing and new vertices in gridSize units when a new vertex is dropped on an existing cell. Default is 4 (40 pixels).

connectOnDrop

mxDefaultToolbar.prototype.connectOnDrop

Specifies if elements should be connected if new cells are dropped onto connectable elements. Default is false.

init

mxDefaultToolbar.prototype.init

Constructs the toolbar for the given container and installs a listener that updates the mxEditor.insertFunction on editor if an item is selected in the toolbar. This assumes that editor is not null.

Parameters

container

DOM node that contains the toolbar.

Functions

addItem

mxDefaultToolbar.prototype.addItem = function( title,
icon,
action,
pressed )

Adds a new item that executes the given action in editor. The title, icon and pressedIcon are used to display the toolbar item.

Parameters

title	String that represents the title (tooltip) for the item.
icon	URL of the icon to be used for displaying the item.
action	Name of the action to execute when the item is clicked.
pressed	Optional URL of the icon for the pressed state.

addSeparator

mxDefaultToolbar.prototype.addSeparator = function( icon )

Adds a vertical separator using the optional icon.

Parameters

icon	Optional URL of the icon that represents the vertical separator. Default is mxClient.imageBasePath + ‘/separator.gif’.

addCombo

mxDefaultToolbar.prototype.addCombo = function()

Helper method to invoke mxToolbar.addCombo on toolbar and return the resulting DOM node.

addActionCombo

mxDefaultToolbar.prototype.addActionCombo = function( title )

Helper method to invoke <mxToolbar.addActionCombo> on toolbar using the given title and return the resulting DOM node.

Parameters

title

String that represents the title of the combo.

addActionOption

mxDefaultToolbar.prototype.addActionOption = function( combo,
title,
action )

Binds the given action to a option with the specified label in the given combo. Combo is an object returned from an earlier call to addCombo or addActionCombo.

Parameters

combo	DOM node that represents the combo box.
title	String that represents the title of the combo.
action	Name of the action to execute in editor.

addOption

mxDefaultToolbar.prototype.addOption = function( combo,
title,
value )

Helper method to invoke mxToolbar.addOption on toolbar and return the resulting DOM node that represents the option.

Parameters

combo	DOM node that represents the combo box.
title	String that represents the title of the combo.
value	Object that represents the value of the option.

addMode

mxDefaultToolbar.prototype.addMode = function( title,
icon,
mode,
pressed,
funct )

Creates an item for selecting the given mode in the editor’s graph. Supported modenames are select, connect and pan.

Parameters

title	String that represents the title of the item.
icon	URL of the icon that represents the item.
mode	String that represents the mode name to be used in mxEditor.setMode.
pressed	Optional URL of the icon that represents the pressed state.
funct	Optional JavaScript function that takes the mxEditor as the first and only argument that is executed after the mode has been selected.

addPrototype

mxDefaultToolbar.prototype.addPrototype = function( title,
icon,
ptype,
pressed,
insert,
toggle )

Creates an item for inserting a clone of the specified prototype cell into the editor’s graph. The ptype may either be a cell or a function that returns a cell.

Parameters

title	String that represents the title of the item.
icon	URL of the icon that represents the item.
ptype	Function or object that represents the prototype cell. If ptype is a function then it is invoked with no arguments to create new instances.
pressed	Optional URL of the icon that represents the pressed state.
insert	Optional JavaScript function that handles an insert of the new cell. This function takes the mxEditor, new cell to be inserted, mouse event and optional mxCell under the mouse pointer as arguments.
toggle	Optional boolean that specifies if the item can be toggled. Default is true.

drop

mxDefaultToolbar.prototype.drop = function( vertex,
evt,
target )

Handles a drop from a toolbar item to the graph. The given vertex represents the new cell to be inserted. This invokes insert or connect depending on the given target cell.

Parameters

vertex	mxCell to be inserted.
evt	Mouse event that represents the drop.
target	Optional mxCell that represents the drop target.

insert

mxDefaultToolbar.prototype.insert = function( vertex,
evt,
target )

Handles a drop by inserting the given vertex into the given parent cell or the default parent if no parent is specified.

Parameters

vertex	mxCell to be inserted.
evt	Mouse event that represents the drop.
parent	Optional mxCell that represents the parent.

connect

mxDefaultToolbar.prototype.connect = function( vertex,
evt,
source )

Handles a drop by connecting the given vertex to the given source cell.

vertex	mxCell to be inserted.
evt	Mouse event that represents the drop.
source	Optional mxCell that represents the source terminal.

installDropHandler

mxDefaultToolbar.prototype.installDropHandler = function ( img,
dropHandler )

Makes the given img draggable using the given function for handling a drop event.

Parameters

img	DOM node that represents the image.
dropHandler	Function that handles a drop of the image.

destroy

mxDefaultToolbar.prototype.destroy = function ()

Destroys the toolbar associated with this object and removes all installed listeners. This does normally not need to be called, the toolbar is destroyed automatically when the window unloads (in IE) by mxEditor.

mxEditor

Extends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg. properties, help, outline, toolbar, and popupmenu. It also adds templates to be used as cells in toolbars, auto-validation using the <validation> flag, attribute cycling using cycleAttributeValues, higher-level events such as <root>, and backend integration using urlPost and urlImage.

Actions

Actions are functions stored in the actions array under their names. The functions take the mxEditor as the first, and an optional mxCell as the second argument and are invoked using execute. Any additional arguments passed to execute are passed on to the action as-is.

A list of built-in actions is available in the addActions description.

Read/write Diagrams

To read a diagram from an XML string, for example from a textfield within the page, the following code is used:

var doc = mxUtils.parseXML(xmlString);
var node = doc.documentElement;
editor.readGraphModel(node);

For reading a diagram from a remote location, use the open method.

To save diagrams in XML on a server, you can set the urlPost variable. This variable will be used in getUrlPost to construct a URL for the post request that is issued in the save method. The post request contains the XML representation of the diagram as returned by writeGraphModel in the xml parameter.

On the server side, the post request is processed using standard technologies such as Java Servlets, CGI, .NET or ASP.

Here are some examples of processing a post request in various languages.

Java: URLDecoder.decode(request.getParameter(“xml”), “UTF-8”).replace(“\n”, “
”)

Note that the linefeeds should only be replaced if the XML is processed in Java, for example when creating an image, but not if the XML is passed back to the client-side.

.NET: HttpUtility.UrlDecode(context.Request.Params[“xml”])
PHP: urldecode($_POST[“xml”])

Creating images

A backend (Java, PHP or C#) is required for creating images. The distribution contains an example for each backend (ImageHandler.java, ImageHandler.cs and graph.php). More information about using a backend to create images can be found in the readme.html files. Note that the preview is implemented using VML/SVG in the browser and does not require a backend. The backend is only required to creates images (bitmaps).

Special characters

Note There are five characters that should always appear in XML content as escapes, so that they do not interact with the syntax of the markup. These are part of the language for all documents based on XML and for HTML.

< (<)
> (>)
& (&)
" (“)
' (‘)

Although it is part of the XML language, ' is not defined in HTML. For this reason the XHTML specification recommends instead the use of ' if text may be passed to a HTML user agent.

If you are having problems with special characters on the server-side then you may want to try the escapePostData flag.

For converting decimal escape sequences inside strings, a user has provided us with the following function:

function html2js(text)
{
  var entitySearch = /&#[0-9]+;/;
  var entity;

  while (entity = entitySearch.exec(text))
  {
    var charCode = entity[0].substring(2, entity[0].length -1);
    text = text.substring(0, entity.index)
           + String.fromCharCode(charCode)
           + text.substring(entity.index + entity[0].length);
  }

  return text;
}

Otherwise try using hex escape sequences and the built-in unescape function for converting such strings.

Local Files

For saving and opening local files, no standardized method exists that works across all browsers. The recommended way of dealing with local files is to create a backend that streams the XML data back to the browser (echo) as an attachment so that a Save-dialog is displayed on the client-side and the file can be saved to the local disk.

For example, in PHP the code that does this looks as follows.

$xml = stripslashes($_POST["xml"]);
header("Content-Disposition: attachment; filename=\"diagram.xml\"");
echo($xml);

To open a local file, the file should be uploaded via a form in the browser and then opened from the server in the editor.

Cell Properties

The properties displayed in the properties dialog are the attributes and values of the cell’s user object, which is an XML node. The XML node is defined in the templates section of the config file.

The templates are stored in mxEditor.templates and contain cells which are cloned at insertion time to create new vertices by use of drag and drop from the toolbar. Each entry in the toolbar for adding a new vertex must refer to an existing template.

In the following example, the task node is a business object and only the mxCell node and its mxGeometry child contain graph information:

<Task label="Task" description="">
  <mxCell vertex="true">
    <mxGeometry as="geometry" width="72" height="32"/>
  </mxCell>
</Task>

The idea is that the XML representation is inverse from the in-memory representation: The outer XML node is the user object and the inner node is the cell. This means the user object of the cell is the Task node with no children for the above example:

<Task label="Task" description=""/>

The Task node can have any tag name, attributes and child nodes. The mxCodec will use the XML hierarchy as the user object, while removing the “known annotations”, such as the mxCell node. At save-time the cell data will be “merged” back into the user object. The user object is only modified via the properties dialog during the lifecycle of the cell.

In the default implementation of createProperties, the user object’s attributes are put into a form for editing. Attributes are changed using the mxCellAttributeChange action in the model. The dialog can be replaced by overriding the createProperties hook or by replacing the showProperties action in actions. Alternatively, the entry in the config file’s popupmenu section can be modified to invoke a different action.

If you want to displey the properties dialog on a doubleclick, you can set mxEditor.dblClickAction to showProperties as follows:

editor.dblClickAction = 'showProperties';

Popupmenu and Toolbar

The toolbar and popupmenu are typically configured using the respective sections in the config file, that is, the popupmenu is defined as follows:

<mxEditor>
  <mxDefaultPopupMenu as="popupHandler">
     <add as="cut" action="cut" icon="images/cut.gif"/>
     ...

New entries can be added to the toolbar by inserting an add-node into the above configuration. Existing entries may be removed and changed by modifying or removing the respective entries in the configuration. The configuration is read by the mxDefaultPopupMenuCodec, the format of the configuration is explained in <mxDefaultPopupMenu.decode>.

The toolbar is defined in the mxDefaultToolbar section. Items can be added and removed in this section.

<mxEditor>
  <mxDefaultToolbar>
    <add as="save" action="save" icon="images/save.gif"/>
    <add as="Swimlane" template="swimlane" icon="images/swimlane.gif"/>
    ...

The format of the configuration is described in mxDefaultToolbarCodec.decode.

Ids

For the IDs, there is an implicit behaviour in mxCodec: It moves the Id from the cell to the user object at encoding time and vice versa at decoding time. For example, if the Task node from above has an id attribute, then the mxCell.id of the corresponding cell will have this value. If there is no Id collision in the model, then the cell may be retrieved using this Id with the mxGraphModel.getCell function. If there is a collision, a new Id will be created for the cell using mxGraphModel.createId. At encoding time, this new Id will replace the value previously stored under the id attribute in the Task node.

See mxEditorCodec, mxDefaultToolbarCodec and mxDefaultPopupMenuCodec for information about configuring the editor and user interface.

Programmatically inserting cells

For inserting a new cell, say, by clicking a button in the document, the following code can be used. This requires an reference to the editor.

var userObject = new Object();
var parent = editor.graph.getDefaultParent();
var model = editor.graph.model;
model.beginUpdate();
try
{
  editor.graph.insertVertex(parent, null, userObject, 20, 20, 80, 30);
}
finally
{
  model.endUpdate();
}

If a template cell from the config file should be inserted, then a clone of the template can be created as follows. The clone is then inserted using the add function instead of addVertex.

var template = editor.templates['task'];
var clone = editor.graph.model.cloneCell(template);

Resources

resources/editor

Language resources for mxEditor

Summary

onInit	Called from within the constructor.
mxgraph=seen	Set when the editor is started.
mxEvent.OPEN	Fires after a file was opened in open.
mxEvent.SAVE	Fires after the current file was saved in save.
mxEvent.POST	Fires if a successful response was received in postDiagram.
mxEvent.ROOT	Fires when the current root has changed, or when the title of the current root has changed.
mxEvent.BEFORE_ADD_VERTEX	Fires before a vertex is added in addVertex.
mxEvent.ADD_VERTEX	Fires between begin- and endUpdate in addVertex.
mxEvent.AFTER_ADD_VERTEX	Fires after a vertex was inserted and selected in addVertex.
mxEvent.ESCAPE	Fires when the escape key is pressed.
mxEditor	Constructs a new editor.
Controls and Handlers
askZoomResource	Specifies the resource key for the zoom dialog.
lastSavedResource	Specifies the resource key for the last saved info.
currentFileResource	Specifies the resource key for the current file info.
propertiesResource	Specifies the resource key for the properties window title.
tasksResource	Specifies the resource key for the tasks window title.
helpResource	Specifies the resource key for the help window title.
outlineResource	Specifies the resource key for the outline window title.
outline	Reference to the mxWindow that contains the outline.
graph	Holds a mxGraph for displaying the diagram.
graphRenderHint	Holds the render hint used for creating the graph in setGraphContainer.
toolbar	Holds a mxDefaultToolbar for displaying the toolbar.
status	DOM container that holds the statusbar.
popupHandler	Holds a mxDefaultPopupMenu for displaying popupmenus.
undoManager	Holds an mxUndoManager for the command history.
keyHandler	Holds a mxDefaultKeyHandler for handling keyboard events.
Actions and Options
actions	Maps from actionnames to actions, which are functions taking the editor and the cell as arguments.
dblClickAction	Specifies the name of the action to be executed when a cell is double clicked.
swimlaneRequired	Specifies if new cells must be inserted into an existing swimlane.
disableContextMenu	Specifies if the context menu should be disabled in the graph container.
Templates
insertFunction	Specifies the function to be used for inserting new cells into the graph.
forcedInserting	Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected.
templates	Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.
defaultEdge	Prototype edge cell that is used for creating new edges.
defaultEdgeStyle	Specifies the edge style to be returned in getEdgeStyle.
defaultGroup	Prototype group cell that is used for creating new groups.
groupBorderSize	Default size for the border of new groups.
Backend Integration
filename	Contains the URL of the last opened file as a string.
lineFeed	Character to be used for encoding linefeeds in save.
postParameterName	Specifies if the name of the post parameter that contains the diagram data in a post request to the server.
escapePostData	Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent.
urlPost	Specifies the URL to be used for posting the diagram to a backend in save.
urlImage	Specifies the URL to be used for creating a bitmap of the graph in the image action.
Autolayout
horizontalFlow	Specifies the direction of the flow in the diagram.
layoutDiagram	Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow.
swimlaneSpacing	Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram.
maintainSwimlanes	Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow.
layoutSwimlanes	Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow.
Attribute Cycling
cycleAttributeValues	Specifies the attribute values to be cycled when inserting new swimlanes.
cycleAttributeIndex	Index of the last consumed attribute index.
cycleAttributeName	Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes.
Windows
tasks	Holds the mxWindow created in showTasks.
tasksWindowImage	Icon for the tasks window.
tasksTop	Specifies the top coordinate of the tasks window in pixels.
help	Holds the mxWindow created in showHelp.
helpWindowImage	Icon for the help window.
urlHelp	Specifies the URL to be used for the contents of the Online Help window.
helpWidth	Specifies the width of the help window in pixels.
helpHeight	Specifies the height of the help window in pixels.
propertiesWidth	Specifies the width of the properties window in pixels.
propertiesHeight	Specifies the height of the properties window in pixels.
movePropertiesDialog	Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved.
validating	Specifies if mxGraph.validateGraph should automatically be invoked after each change.
modified	True if the graph has been modified since it was last saved.
isModified	Returns modified.
setModified	Sets modified to the specified boolean value.
addActions	Adds the built-in actions to the editor instance.
configure	Configures the editor using the specified node.
resetFirstTime	Resets the cookie that is used to remember if the editor has already been used.
resetHistory	Resets the command history, modified state and counters.
addAction	Binds the specified actionname to the specified function.
execute	Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument.
addTemplate	Adds the specified template under the given name in templates.
getTemplate	Returns the template for the given name.
createGraph	Creates the graph for the editor.
createSwimlaneManager	Sets the graph’s container using mxGraph.init.
createLayoutManager	Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.
setGraphContainer	Sets the graph’s container using mxGraph.init.
installDblClickHandler	Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.
installUndoHandler	Adds the undoManager to the graph model and the view.
installDrillHandler	Installs listeners for dispatching the <root> event.
installChangeHandler	Installs the listeners required to automatically validate the graph.
installInsertHandler	Installs the handler for invoking insertFunction if one is defined.
createDiagramLayout	Creates the layout instance used to layout the swimlanes in the diagram.
createSwimlaneLayout	Creates the layout instance used to layout the children of each swimlane.
createToolbar	Creates the toolbar with no container.
setToolbarContainer	Initializes the toolbar for the given container.
setStatusContainer	Creates the status using the specified container.
setStatus	Display the specified message in the status bar.
setTitleContainer	Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.
treeLayout	Executes a vertical or horizontal compact tree layout using the specified cell as an argument.
getTitle	Returns the string value for the current root of the diagram.
getRootTitle	Returns the string value of the root cell in mxGraph.model.
undo	Undo the last change in graph.
redo	Redo the last change in graph.
groupCells	Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.
createGroup	Creates and returns a clone of defaultGroup to be used as a new group cell in <group>.
open	Opens the specified file synchronously and parses it using readGraphModel.
readGraphModel	Reads the specified XML node into the existing graph model and resets the command history and modified state.
save	Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost.
postDiagram	Hook for subclassers to override the posting of a diagram represented by the given node to the given URL.
writeGraphModel	Hook to create the string representation of the diagram.
getUrlPost	Returns the URL to post the diagram to.
getUrlImage	Returns the URL to create the image with.
swapStyles	Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.
showProperties	Creates and shows the properties dialog for the given cell.
isPropertiesVisible	Returns true if the properties dialog is currently visible.
createProperties	Creates and returns the DOM node that represents the contents of the properties dialog for the given cell.
hideProperties	Hides the properties dialog.
showTasks	Shows the tasks window.
refreshTasks	Updates the contents of the tasks window using createTasks.
createTasks	Updates the contents of the given DOM node to display the tasks associated with the current editor state.
showHelp	Shows the help window.
showOutline	Shows the outline window.
setMode	Puts the graph into the specified mode.
createPopupMenu	Uses popupHandler to create the menu in the graph’s panning handler.
createEdge	Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph.
getEdgeStyle	Returns a string identifying the style of new edges.
consumeCycleAttribute	Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.
cycleAttribute	Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.
addVertex	Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.
destroy	Removes the editor and all its associated resources.

onInit

Called from within the constructor. In the callback, “this” refers to the editor instance.

mxgraph=seen

Set when the editor is started. Never expires. Use resetFirstTime to reset this cookie. This cookie only exists if onInit is implemented.

mxEvent.OPEN

Fires after a file was opened in open. The <code>filename</code> property contains the filename that was used. The same value is also available in filename.

mxEvent.SAVE

Fires after the current file was saved in save. The <code>url</code> property contains the URL that was used for saving.

mxEvent.POST

Fires if a successful response was received in postDiagram. The <code>request</code> property contains the mxXmlRequest, the <code>url</code> and <code>data</code> properties contain the URL and the data that were used in the post request.

mxEvent.ROOT

Fires when the current root has changed, or when the title of the current root has changed. This event has no properties.

mxEvent.BEFORE_ADD_VERTEX

Fires before a vertex is added in addVertex. The <code>vertex</code> property contains the new vertex and the <code>parent</code> property contains its parent.

mxEvent.ADD_VERTEX

Fires between begin- and endUpdate in addVertex. The <code>vertex</code> property contains the vertex that is being inserted.

mxEvent.AFTER_ADD_VERTEX

Fires after a vertex was inserted and selected in addVertex. The <code>vertex</code> property contains the new vertex.

Example

For starting an in-place edit after a new vertex has been added to the graph, the following code can be used.

editor.addListener(mxEvent.AFTER_ADD_VERTEX, function(sender, evt)
{
  var vertex = evt.getProperty('vertex');

  if (editor.graph.isCellEditable(vertex))
  {
     editor.graph.startEditingAtCell(vertex);
  }
});

mxEvent.ESCAPE

Fires when the escape key is pressed. The <code>event</code> property contains the key event.

mxEditor

function mxEditor( config )

Constructs a new editor. This function invokes the onInit callback upon completion.

Example

var config = mxUtils.load('config/diagrameditor.xml').getDocumentElement();
var editor = new mxEditor(config);

Parameters

config

Optional XML node that contains the configuration.

Controls and Handlers

askZoomResource

mxEditor.prototype.askZoomResource

Specifies the resource key for the zoom dialog. If the resource for this key does not exist then the value is used as the error message. Default is ‘askZoom’.

lastSavedResource

mxEditor.prototype.lastSavedResource

Specifies the resource key for the last saved info. If the resource for this key does not exist then the value is used as the error message. Default is ‘lastSaved’.

currentFileResource

mxEditor.prototype.currentFileResource

Specifies the resource key for the current file info. If the resource for this key does not exist then the value is used as the error message. Default is ‘lastSaved’.

propertiesResource

mxEditor.prototype.propertiesResource

Specifies the resource key for the properties window title. If the resource for this key does not exist then the value is used as the error message. Default is ‘properties’.

tasksResource

mxEditor.prototype.tasksResource

Specifies the resource key for the tasks window title. If the resource for this key does not exist then the value is used as the error message. Default is ‘tasks’.

helpResource

mxEditor.prototype.helpResource

Specifies the resource key for the help window title. If the resource for this key does not exist then the value is used as the error message. Default is ‘help’.

outlineResource

mxEditor.prototype.outlineResource

Specifies the resource key for the outline window title. If the resource for this key does not exist then the value is used as the error message. Default is ‘outline’.

outline

mxEditor.prototype.outline

Reference to the mxWindow that contains the outline. The mxOutline is stored in outline.outline.

graph

mxEditor.prototype.graph

Holds a mxGraph for displaying the diagram. The graph is created in setGraphContainer.

graphRenderHint

mxEditor.prototype.graphRenderHint

Holds the render hint used for creating the graph in setGraphContainer. See mxGraph. Default is null.

toolbar

mxEditor.prototype.toolbar

Holds a mxDefaultToolbar for displaying the toolbar. The toolbar is created in setToolbarContainer.

status

mxEditor.prototype.status

DOM container that holds the statusbar. Default is null. Use setStatusContainer to set this value.

popupHandler

mxEditor.prototype.popupHandler

Holds a mxDefaultPopupMenu for displaying popupmenus.

undoManager

mxEditor.prototype.undoManager

Holds an mxUndoManager for the command history.

keyHandler

mxEditor.prototype.keyHandler

Holds a mxDefaultKeyHandler for handling keyboard events. The handler is created in setGraphContainer.

Actions and Options

actions

mxEditor.prototype.actions

Maps from actionnames to actions, which are functions taking the editor and the cell as arguments. Use addAction to add or replace an action and execute to execute an action by name, passing the cell to be operated upon as the second argument.

dblClickAction

mxEditor.prototype.dblClickAction

Specifies the name of the action to be executed when a cell is double clicked. Default is edit.

To handle a singleclick, use the following code.

editor.graph.addListener(mxEvent.CLICK, function(sender, evt)
{
  var e = evt.getProperty('event');
  var cell = evt.getProperty('cell');

  if (cell != null && !e.isConsumed())
  {
    // Do something useful with cell...
    e.consume();
  }
});

swimlaneRequired

mxEditor.prototype.swimlaneRequired

Specifies if new cells must be inserted into an existing swimlane. Otherwise, cells that are not swimlanes can be inserted as top-level cells. Default is false.

disableContextMenu

mxEditor.prototype.disableContextMenu

Specifies if the context menu should be disabled in the graph container. Default is true.

Templates

insertFunction

mxEditor.prototype.insertFunction

Specifies the function to be used for inserting new cells into the graph. This is assigned from the mxDefaultToolbar if a vertex-tool is clicked.

forcedInserting

mxEditor.prototype.forcedInserting

Specifies if a new cell should be inserted on a single click even using insertFunction if there is a cell under the mousepointer, otherwise the cell under the mousepointer is selected. Default is false.

templates

mxEditor.prototype.templates

Maps from names to protoype cells to be used in the toolbar for inserting new cells into the diagram.

defaultEdge

mxEditor.prototype.defaultEdge

Prototype edge cell that is used for creating new edges.

defaultEdgeStyle

mxEditor.prototype.defaultEdgeStyle

Specifies the edge style to be returned in getEdgeStyle. Default is null.

defaultGroup

mxEditor.prototype.defaultGroup

Prototype group cell that is used for creating new groups.

groupBorderSize

mxEditor.prototype.groupBorderSize

Default size for the border of new groups. If null, then then mxGraph.gridSize is used. Default is null.

Backend Integration

filename

mxEditor.prototype.filename

Contains the URL of the last opened file as a string. Default is null.

lineFeed

Character to be used for encoding linefeeds in save. Default is ‘
’.

postParameterName

mxEditor.prototype.postParameterName

Specifies if the name of the post parameter that contains the diagram data in a post request to the server. Default is xml.

escapePostData

mxEditor.prototype.escapePostData

Specifies if the data in the post request for saving a diagram should be converted using encodeURIComponent. Default is true.

urlPost

mxEditor.prototype.urlPost

Specifies the URL to be used for posting the diagram to a backend in save.

urlImage

mxEditor.prototype.urlImage

Specifies the URL to be used for creating a bitmap of the graph in the image action.

Autolayout

horizontalFlow

mxEditor.prototype.horizontalFlow

Specifies the direction of the flow in the diagram. This is used in the layout algorithms. Default is false, ie. vertical flow.

layoutDiagram

mxEditor.prototype.layoutDiagram

Specifies if the top-level elements in the diagram should be layed out using a vertical or horizontal stack depending on the setting of horizontalFlow. The spacing between the swimlanes is specified by swimlaneSpacing. Default is false.

If the top-level elements are swimlanes, then the intra-swimlane layout is activated by the layoutSwimlanes switch.

swimlaneSpacing

mxEditor.prototype.swimlaneSpacing

Specifies the spacing between swimlanes if automatic layout is turned on in layoutDiagram. Default is 0.

maintainSwimlanes

mxEditor.prototype.maintainSwimlanes

Specifies if the swimlanes should be kept at the same width or height depending on the setting of horizontalFlow. Default is false.

For horizontal flows, all swimlanes have the same height and for vertical flows, all swimlanes have the same width. Furthermore, the swimlanes are automatically “stacked” if layoutDiagram is true.

layoutSwimlanes

mxEditor.prototype.layoutSwimlanes

Specifies if the children of swimlanes should be layed out, either vertically or horizontally depending on horizontalFlow. Default is false.

Attribute Cycling

cycleAttributeValues

mxEditor.prototype.cycleAttributeValues

Specifies the attribute values to be cycled when inserting new swimlanes. Default is an empty array.

cycleAttributeIndex

mxEditor.prototype.cycleAttributeIndex

Index of the last consumed attribute index. If a new swimlane is inserted, then the cycleAttributeValues at this index will be used as the value for cycleAttributeName. Default is 0.

cycleAttributeName

mxEditor.prototype.cycleAttributeName

Name of the attribute to be assigned a cycleAttributeValues when inserting new swimlanes. Default is fillColor.

Windows

tasks

mxEditor.prototype.tasks

Holds the mxWindow created in showTasks.

tasksWindowImage

mxEditor.prototype.tasksWindowImage

Icon for the tasks window.

tasksTop

mxEditor.prototype.tasksTop

Specifies the top coordinate of the tasks window in pixels. Default is 20.

help

mxEditor.prototype.help

Holds the mxWindow created in showHelp.

helpWindowImage

mxEditor.prototype.helpWindowImage

Icon for the help window.

urlHelp

mxEditor.prototype.urlHelp

Specifies the URL to be used for the contents of the Online Help window. This is usually specified in the resources file under urlHelp for language-specific online help support.

helpWidth

mxEditor.prototype.helpWidth

Specifies the width of the help window in pixels. Default is 300.

helpHeight

mxEditor.prototype.helpHeight

Specifies the height of the help window in pixels. Default is 260.

propertiesWidth

mxEditor.prototype.propertiesWidth

Specifies the width of the properties window in pixels. Default is 240.

propertiesHeight

mxEditor.prototype.propertiesHeight

Specifies the height of the properties window in pixels. If no height is specified then the window will be automatically sized to fit its contents. Default is null.

movePropertiesDialog

mxEditor.prototype.movePropertiesDialog

Specifies if the properties dialog should be automatically moved near the cell it is displayed for, otherwise the dialog is not moved. This value is only taken into account if the dialog is already visible. Default is false.

validating

mxEditor.prototype.validating

Specifies if mxGraph.validateGraph should automatically be invoked after each change. Default is false.

modified

mxEditor.prototype.modified

True if the graph has been modified since it was last saved.

isModified

mxEditor.prototype.isModified = function ()

Returns modified.

setModified

mxEditor.prototype.setModified = function ( value )

Sets modified to the specified boolean value.

addActions

mxEditor.prototype.addActions = function ()

Adds the built-in actions to the editor instance.

save	Saves the graph using urlPost.
print	Shows the graph in a new print preview window.
show	Shows the graph in a new window.
exportImage	Shows the graph as a bitmap image using getUrlImage.
refresh	Refreshes the graph’s display.
cut	Copies the current selection into the clipboard and removes it from the graph.
copy	Copies the current selection into the clipboard.
paste	Pastes the clipboard into the graph.
delete	Removes the current selection from the graph.
group	Puts the current selection into a new group.
ungroup	Removes the selected groups and selects the children.
undo	Undoes the last change on the graph model.
redo	Redoes the last change on the graph model.
zoom	Sets the zoom via a dialog.
zoomIn	Zooms into the graph.
zoomOut	Zooms out of the graph
actualSize	Resets the scale and translation on the graph.
fit	Changes the scale so that the graph fits into the window.
showProperties	Shows the properties dialog.
selectAll	Selects all cells.
selectNone	Clears the selection.
selectVertices	Selects all vertices. selectEdges = Selects all edges.
edit	Starts editing the current selection cell.
enterGroup	Drills down into the current selection cell.
exitGroup	Moves up in the drilling hierachy
home	Moves to the topmost parent in the drilling hierarchy
selectPrevious	Selects the previous cell.
selectNext	Selects the next cell.
selectParent	Selects the parent of the selection cell.
selectChild	Selects the first child of the selection cell.
collapse	Collapses the currently selected cells.
expand	Expands the currently selected cells.
bold	Toggle bold text style.
italic	Toggle italic text style.
underline	Toggle underline text style.
alignCellsLeft	Aligns the selection cells at the left.
alignCellsCenter	Aligns the selection cells in the center.
alignCellsRight	Aligns the selection cells at the right.
alignCellsTop	Aligns the selection cells at the top.
alignCellsMiddle	Aligns the selection cells in the middle.
alignCellsBottom	Aligns the selection cells at the bottom.
alignFontLeft	Sets the horizontal text alignment to left.
alignFontCenter	Sets the horizontal text alignment to center.
alignFontRight	Sets the horizontal text alignment to right.
alignFontTop	Sets the vertical text alignment to top.
alignFontMiddle	Sets the vertical text alignment to middle.
alignFontBottom	Sets the vertical text alignment to bottom.
toggleTasks	Shows or hides the tasks window.
toggleHelp	Shows or hides the help window.
toggleOutline	Shows or hides the outline window.
toggleConsole	Shows or hides the console window.

configure

mxEditor.prototype.configure = function ( node )

Configures the editor using the specified node. To load the configuration from a given URL the following code can be used to obtain the XML node.

var node = mxUtils.load(url).getDocumentElement();

Parameters

node	XML node that contains the configuration.

resetFirstTime

mxEditor.prototype.resetFirstTime = function ()

Resets the cookie that is used to remember if the editor has already been used.

resetHistory

mxEditor.prototype.resetHistory = function ()

Resets the command history, modified state and counters.

addAction

mxEditor.prototype.addAction = function ( actionname,
funct )

Binds the specified actionname to the specified function.

Parameters

actionname	String that specifies the name of the action to be added.
funct	Function that implements the new action. The first argument of the function is the editor it is used with, the second argument is the cell it operates upon.

Example

editor.addAction('test', function(editor, cell)
{
     mxUtils.alert("test "+cell);
});

execute

mxEditor.prototype.execute = function ( actionname,
cell,
evt )

Executes the function with the given name in actions passing the editor instance and given cell as the first and second argument. All additional arguments are passed to the action as well. This method contains a try-catch block and displays an error message if an action causes an exception. The exception is re-thrown after the error message was displayed.

Example

editor.execute("showProperties", cell);

addTemplate

mxEditor.prototype.addTemplate = function ( name,
template )

Adds the specified template under the given name in templates.

getTemplate

mxEditor.prototype.getTemplate = function ( name )

Returns the template for the given name.

createGraph

mxEditor.prototype.createGraph = function ()

Creates the graph for the editor. The graph is created with no container and is initialized from setGraphContainer.

createSwimlaneManager

mxEditor.prototype.createSwimlaneManager = function ( graph )

Sets the graph’s container using mxGraph.init.

createLayoutManager

mxEditor.prototype.createLayoutManager = function ( graph )

Creates a layout manager for the swimlane and diagram layouts, that is, the locally defined inter- and intraswimlane layouts.

setGraphContainer

mxEditor.prototype.setGraphContainer = function ( container )

Sets the graph’s container using mxGraph.init.

installDblClickHandler

mxEditor.prototype.installDblClickHandler = function ( graph )

Overrides mxGraph.dblClick to invoke dblClickAction on a cell and reset the selection tool in the toolbar.

installUndoHandler

mxEditor.prototype.installUndoHandler = function ( graph )

Adds the undoManager to the graph model and the view.

installDrillHandler

mxEditor.prototype.installDrillHandler = function ( graph )

Installs listeners for dispatching the <root> event.

installChangeHandler

mxEditor.prototype.installChangeHandler = function ( graph )

Installs the listeners required to automatically validate the graph. On each change of the root, this implementation fires a <root> event.

installInsertHandler

mxEditor.prototype.installInsertHandler = function ( graph )

Installs the handler for invoking insertFunction if one is defined.

createDiagramLayout

mxEditor.prototype.createDiagramLayout = function ()

Creates the layout instance used to layout the swimlanes in the diagram.

createSwimlaneLayout

mxEditor.prototype.createSwimlaneLayout = function ()

Creates the layout instance used to layout the children of each swimlane.

createToolbar

mxEditor.prototype.createToolbar = function ()

Creates the toolbar with no container.

setToolbarContainer

mxEditor.prototype.setToolbarContainer = function ( container )

Initializes the toolbar for the given container.

setStatusContainer

mxEditor.prototype.setStatusContainer = function ( container )

Creates the status using the specified container.

This implementation adds listeners in the editor to display the last saved time and the current filename in the status bar.

Parameters

container

DOM node that will contain the statusbar.

setStatus

mxEditor.prototype.setStatus = function ( message )

Display the specified message in the status bar.

Parameters

message

String the specified the message to be displayed.

setTitleContainer

mxEditor.prototype.setTitleContainer = function ( container )

Creates a listener to update the inner HTML of the specified DOM node with the value of getTitle.

Parameters

container

DOM node that will contain the title.

treeLayout

mxEditor.prototype.treeLayout = function ( cell,
horizontal )

Executes a vertical or horizontal compact tree layout using the specified cell as an argument. The cell may either be a group or the root of a tree.

Parameters

cell	mxCell to use in the compact tree layout.
horizontal	Optional boolean to specify the tree’s orientation. Default is true.

getTitle

mxEditor.prototype.getTitle = function ()

Returns the string value for the current root of the diagram.

getRootTitle

mxEditor.prototype.getRootTitle = function ()

Returns the string value of the root cell in mxGraph.model.

undo

mxEditor.prototype.undo = function ()

Undo the last change in graph.

redo

mxEditor.prototype.redo = function ()

Redo the last change in graph.

groupCells

mxEditor.prototype.groupCells = function ()

Invokes createGroup to create a new group cell and the invokes mxGraph.groupCells, using the grid size of the graph as the spacing in the group’s content area.

createGroup

mxEditor.prototype.createGroup = function ()

Creates and returns a clone of defaultGroup to be used as a new group cell in <group>.

open

mxEditor.prototype.open = function ( filename )

Opens the specified file synchronously and parses it using readGraphModel. It updates filename and fires an open-event after the file has been opened. Exceptions should be handled as follows:

try
{
  editor.open(filename);
}
catch (e)
{
  mxUtils.error('Cannot open ' + filename +
    ': ' + e.message, 280, true);
}

Parameters

filename

URL of the file to be opened.

readGraphModel

mxEditor.prototype.readGraphModel = function ( node )

Reads the specified XML node into the existing graph model and resets the command history and modified state.

save

mxEditor.prototype.save = function ( url,
linefeed )

Posts the string returned by writeGraphModel to the given URL or the URL returned by getUrlPost. The actual posting is carried out by postDiagram. If the URL is null then the resulting XML will be displayed using mxUtils.popup. Exceptions should be handled as follows:

try
{
  editor.save();
}
catch (e)
{
  mxUtils.error('Cannot save : ' + e.message, 280, true);
}

postDiagram

mxEditor.prototype.postDiagram = function ( url,
data )

Hook for subclassers to override the posting of a diagram represented by the given node to the given URL. This fires an asynchronous <post> event if the diagram has been posted.

Example

To replace the diagram with the diagram in the response, use the following code.

editor.addListener(mxEvent.POST, function(sender, evt)
{
  // Process response (replace diagram)
  var req = evt.getProperty('request');
  var root = req.getDocumentElement();
  editor.graph.readGraphModel(root)
});

writeGraphModel

mxEditor.prototype.writeGraphModel = function ( linefeed )

Hook to create the string representation of the diagram. The default implementation uses an mxCodec to encode the graph model as follows:

var enc = new mxCodec();
var node = enc.encode(this.graph.getModel());
return mxUtils.getXml(node, this.linefeed);

Parameters

linefeed

Optional character to be used as the linefeed. Default is <linefeed>.

getUrlPost

mxEditor.prototype.getUrlPost = function ()

Returns the URL to post the diagram to. This is used in save. The default implementation returns urlPost, adding <code>?draft=true</code>.

getUrlImage

mxEditor.prototype.getUrlImage = function ()

Returns the URL to create the image with. This is typically the URL of a backend which accepts an XML representation of a graph view to create an image. The function is used in the image action to create an image. This implementation returns urlImage.

swapStyles

mxEditor.prototype.swapStyles = function ( first,
second )

Swaps the styles for the given names in the graph’s stylesheet and refreshes the graph.

showProperties

mxEditor.prototype.showProperties = function ( cell )

Creates and shows the properties dialog for the given cell. The content area of the dialog is created using createProperties.

isPropertiesVisible

mxEditor.prototype.isPropertiesVisible = function ()

Returns true if the properties dialog is currently visible.

createProperties

mxEditor.prototype.createProperties = function ( cell )

Creates and returns the DOM node that represents the contents of the properties dialog for the given cell. This implementation works for user objects that are XML nodes and display all the node attributes in a form.

hideProperties

mxEditor.prototype.hideProperties = function ()

Hides the properties dialog.

showTasks

mxEditor.prototype.showTasks = function ()

Shows the tasks window. The tasks window is created using createTasks. The default width of the window is 200 pixels, the y-coordinate of the location can be specifies in tasksTop and the x-coordinate is right aligned with a 20 pixel offset from the right border. To change the location of the tasks window, the following code can be used:

var oldShowTasks = mxEditor.prototype.showTasks;
mxEditor.prototype.showTasks = function()
{
  oldShowTasks.apply(this, arguments); // "supercall"

  if (this.tasks != null)
  {
    this.tasks.setLocation(10, 10);
  }
};

refreshTasks

mxEditor.prototype.refreshTasks = function ( div )

Updates the contents of the tasks window using createTasks.

createTasks

mxEditor.prototype.createTasks = function ( div )

Updates the contents of the given DOM node to display the tasks associated with the current editor state. This is invoked whenever there is a possible change of state in the editor. Default implementation is empty.

showHelp

mxEditor.prototype.showHelp = function ( tasks )

Shows the help window. If the help window does not exist then it is created using an iframe pointing to the resource for the <code>urlHelp</code> key or urlHelp if the resource is undefined.

showOutline

mxEditor.prototype.showOutline = function ()

Shows the outline window. If the window does not exist, then it is created using an mxOutline.

setMode

mxEditor.prototype.setMode = function( modename )

Puts the graph into the specified mode. The following modenames are supported:

select	Selects using the left mouse button, new connections are disabled.
connect	Selects using the left mouse button or creates new connections if mouse over cell hotspot. See mxConnectionHandler.
pan	Pans using the left mouse button, new connections are disabled.

createPopupMenu

mxEditor.prototype.createPopupMenu = function ( menu,
cell,
evt )

Uses popupHandler to create the menu in the graph’s panning handler. The redirection is setup in setToolbarContainer.

createEdge

mxEditor.prototype.createEdge = function ( source,
target )

Uses defaultEdge as the prototype for creating new edges in the connection handler of the graph. The style of the edge will be overridden with the value returned by getEdgeStyle.

getEdgeStyle

mxEditor.prototype.getEdgeStyle = function ()

Returns a string identifying the style of new edges. The function is used in createEdge when new edges are created in the graph.

consumeCycleAttribute

mxEditor.prototype.consumeCycleAttribute = function ( cell )

Returns the next attribute in cycleAttributeValues or null, if not attribute should be used in the specified cell.

cycleAttribute

mxEditor.prototype.cycleAttribute = function ( cell )

Uses the returned value from consumeCycleAttribute as the value for the cycleAttributeName key in the given cell’s style.

addVertex

mxEditor.prototype.addVertex = function ( parent,
vertex,
x,
y )

Adds the given vertex as a child of parent at the specified x and y coordinate and fires an addVertex event.

destroy

mxEditor.prototype.destroy = function ()

Removes the editor and all its associated resources. This does not normally need to be called, it is called automatically when the window unloads.

mxCodecRegistry

Singleton class that acts as a global registry for codecs.

Adding an mxCodec

1. Define a default codec with a new instance of the object to be handled.

var codec = new mxObjectCodec(new mxGraphModel());

2. Define the functions required for encoding and decoding objects.

codec.encode = function(enc, obj) { ... }
codec.decode = function(dec, node, into) { ... }

3. Register the codec in the mxCodecRegistry.

mxCodecRegistry.register(codec);

mxObjectCodec.decode may be used to either create a new instance of an object or to configure an existing instance, in which case the into argument points to the existing object. In this case, we say the codec “configures” the object.

Summary

Variables
codecs	Maps from constructor names to codecs.
aliases	Maps from classnames to codecnames.
Functions
register	Registers a new codec and associates the name of the template constructor in the codec with the codec object.
addAlias	Adds an alias for mapping a classname to a codecname.
getCodec	Returns a codec that handles objects that are constructed using the given constructor.

Variables

codecs

Maps from constructor names to codecs.

aliases

Maps from classnames to codecnames.

Functions

register

register: function( codec )

Registers a new codec and associates the name of the template constructor in the codec with the codec object.

Parameters

codec

mxObjectCodec to be registered.

addAlias

addAlias: function( classname,
codecname )

Adds an alias for mapping a classname to a codecname.

getCodec

getCodec: function( ctor )

Returns a codec that handles objects that are constructed using the given constructor.

Parameters

ctor	JavaScript constructor function.

mxCodec

XML codec for JavaScript object graphs. See mxObjectCodec for a description of the general encoding/decoding scheme. This class uses the codecs registered in mxCodecRegistry for encoding/decoding each object.

References

In order to resolve references, especially forward references, the mxCodec constructor must be given the document that contains the referenced elements.

Examples

The following code is used to encode a graph model.

var encoder = new mxCodec();
var result = encoder.encode(graph.getModel());
var xml = mxUtils.getXml(result);

Example

Using the code below, an XML document is decoded into an existing model. The document may be obtained using one of the functions in mxUtils for loading an XML file, eg. mxUtils.get, or using mxUtils.parseXml for parsing an XML string.

var doc = mxUtils.parseXml(xmlString);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());

Example

This example demonstrates parsing a list of isolated cells into an existing graph model. Note that the cells do not have a parent reference so they can be added anywhere in the cell hierarchy after parsing.

var xml = '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';
var doc = mxUtils.parseXml(xml);
var codec = new mxCodec(doc);
var elt = doc.documentElement.firstChild;
var cells = [];

while (elt != null)
{
  cells.push(codec.decode(elt));
  elt = elt.nextSibling;
}

graph.addCells(cells);

Example

Using the following code, the selection cells of a graph are encoded and the output is displayed in a dialog box.

var enc = new mxCodec();
var cells = graph.getSelectionCells();
mxUtils.alert(mxUtils.getPrettyXml(enc.encode(cells)));

Newlines in the XML can be converted to <br>, in which case a ‘<br>’ argument must be passed to mxUtils.getXml as the second argument.

Debugging

For debugging I/O you can use the following code to get the sequence of encoded objects:

var oldEncode = mxCodec.prototype.encode;
mxCodec.prototype.encode = function(obj)
{
  mxLog.show();
  mxLog.debug('mxCodec.encode: obj='+mxUtils.getFunctionName(obj.constructor));

  return oldEncode.apply(this, arguments);
};

Note that the I/O system adds object codecs for new object automatically. For decoding those objects, the constructor should be written as follows:

var MyObj = function(name)
{
  // ...
};

Summary

Functions
mxCodec	Constructs an XML encoder/decoder for the specified owner document.
Variables
document	The owner document of the codec.
objects	Maps from IDs to objects.
elements	Lookup table for resolving IDs to elements.
encodeDefaults	Specifies if default values should be encoded.
Functions
putObject	Assoiates the given object with the given ID and returns the given object.
getObject	Returns the decoded object for the element with the specified ID in document.
lookup	Hook for subclassers to implement a custom lookup mechanism for cell IDs.
getElementById	Returns the element with the given ID from document.
updateElements	Returns the element with the given ID from document.
addElement	Adds the given element to elements if it has an ID.
getId	Returns the ID of the specified object.
reference	Hook for subclassers to implement a custom method for retrieving IDs from objects.
encode	Encodes the specified object and returns the resulting XML node.
decode	Decodes the given XML node.
encodeCell	Encoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg.
isCellCodec	Returns true if the given codec is a cell codec.
decodeCell	Decodes cells that have been encoded using inversion, ie.
insertIntoGraph	Inserts the given cell into its parent and terminal cells.
setAttribute	Sets the attribute on the specified node to value.

Functions

mxCodec

function mxCodec( document )

Constructs an XML encoder/decoder for the specified owner document.

Parameters

document

Optional XML document that contains the data. If no document is specified then a new document is created using mxUtils.createXmlDocument.

Variables

document

mxCodec.prototype.document

The owner document of the codec.

objects

mxCodec.prototype.objects

Maps from IDs to objects.

elements

mxCodec.prototype.elements

Lookup table for resolving IDs to elements.

encodeDefaults

mxCodec.prototype.encodeDefaults

Specifies if default values should be encoded. Default is false.

Functions

putObject

mxCodec.prototype.putObject = function( id,
obj )

Assoiates the given object with the given ID and returns the given object.

Parameters

id	ID for the object to be associated with.
obj	Object to be associated with the ID.

getObject

mxCodec.prototype.getObject = function( id )

Returns the decoded object for the element with the specified ID in document. If the object is not known then lookup is used to find an object. If no object is found, then the element with the respective ID from the document is parsed using decode.

lookup

mxCodec.prototype.lookup = function( id )

Hook for subclassers to implement a custom lookup mechanism for cell IDs. This implementation always returns null.

Example

var codec = new mxCodec();
codec.lookup = function(id)
{
  return model.getCell(id);
};

Parameters

id	ID of the object to be returned.

getElementById

mxCodec.prototype.getElementById = function( id )

Returns the element with the given ID from document.

Parameters

id	String that contains the ID.

updateElements

mxCodec.prototype.updateElements = function()

Returns the element with the given ID from document.

Parameters

id	String that contains the ID.

addElement

mxCodec.prototype.addElement = function( node )

Adds the given element to elements if it has an ID.

getId

mxCodec.prototype.getId = function( obj )

Returns the ID of the specified object. This implementation calls reference first and if that returns null handles the object as an mxCell by returning their IDs using mxCell.getId. If no ID exists for the given cell, then an on-the-fly ID is generated using mxCellPath.create.

Parameters

obj	Object to return the ID for.

reference

mxCodec.prototype.reference = function( obj )

Hook for subclassers to implement a custom method for retrieving IDs from objects. This implementation always returns null.

Example

var codec = new mxCodec();
codec.reference = function(obj)
{
  return obj.getCustomId();
};

Parameters

obj	Object whose ID should be returned.

encode

mxCodec.prototype.encode = function( obj )

Encodes the specified object and returns the resulting XML node.

Parameters

obj	Object to be encoded.

decode

mxCodec.prototype.decode = function( node,
into )

Decodes the given XML node. The optional “into” argument specifies an existing object to be used. If no object is given, then a new instance is created using the constructor from the codec.

The function returns the passed in object or the new instance if no object was given.

Parameters

node	XML node to be decoded.
into	Optional object to be decodec into.

encodeCell

mxCodec.prototype.encodeCell = function( cell,
node,
includeChildren )

Encoding of cell hierarchies is built-into the core, but is a higher-level function that needs to be explicitely used by the respective object encoders (eg. mxModelCodec, mxChildChangeCodec and mxRootChangeCodec). This implementation writes the given cell and its children as a (flat) sequence into the given node. The children are not encoded if the optional includeChildren is false. The function is in charge of adding the result into the given node and has no return value.

Parameters

cell	mxCell to be encoded.
node	Parent XML node to add the encoded cell into.
includeChildren	Optional boolean indicating if the function should include all descendents. Default is true.

isCellCodec

mxCodec.prototype.isCellCodec = function( codec )

Returns true if the given codec is a cell codec. This uses mxCellCodec.isCellCodec to check if the codec is of the given type.

decodeCell

mxCodec.prototype.decodeCell = function( node,
restoreStructures )

Decodes cells that have been encoded using inversion, ie. where the user object is the enclosing node in the XML, and restores the group and graph structure in the cells. Returns a new mxCell instance that represents the given node.

Parameters

node	XML node that contains the cell data.
restoreStructures	Optional boolean indicating whether the graph structure should be restored by calling insert and insertEdge on the parent and terminals, respectively. Default is true.

insertIntoGraph

mxCodec.prototype.insertIntoGraph = function( cell )

Inserts the given cell into its parent and terminal cells.

setAttribute

mxCodec.prototype.setAttribute = function( node,
attribute,
value )

Sets the attribute on the specified node to value. This is a helper method that makes sure the attribute and value arguments are not null.

Parameters

node	XML node to set the attribute for.
attributes	Attributename to be set.
value	New value of the attribute.

mxObjectCodec

Generic codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.

Atomic Values

Consider the following example.

var obj = new Object();
obj.foo = "Foo";
obj.bar = "Bar";

This object is encoded into an XML node using the following.

var enc = new mxCodec();
var node = enc.encode(obj);

The output of the encoding may be viewed using mxLog as follows.

mxLog.show();
mxLog.debug(mxUtils.getPrettyXml(node));

Finally, the result of the encoding looks as follows.

<Object foo="Foo" bar="Bar"/>

In the above output, the foo and bar fields have been mapped to attributes with the same names, and the name of the constructor was used for the nodename.

Booleans

Since booleans are numbers in JavaScript, all boolean values are encoded into 1 for true and 0 for false. The decoder also accepts the string true and false for boolean values.

Objects

The above scheme is applied to all atomic fields, that is, to all non-object fields of an object. For object fields, a child node is created with a special attribute that contains the fieldname. This special attribute is called “as” and hence, as is a reserved word that should not be used for a fieldname.

Consider the following example where foo is an object and bar is an atomic property of foo.

var obj = {foo: {bar: "Bar"}};

This will be mapped to the following XML structure by mxObjectCodec.

<Object>
  <Object bar="Bar" as="foo"/>
</Object>

In the above output, the inner Object node contains the as-attribute that specifies the fieldname in the enclosing object. That is, the field foo was mapped to a child node with an as-attribute that has the value foo.

Arrays

Arrays are special objects that are either associative, in which case each key, value pair is treated like a field where the key is the fieldname, or they are a sequence of atomic values and objects, which is mapped to a sequence of child nodes. For object elements, the above scheme is applied without the use of the special as-attribute for creating each child. For atomic elements, a special add-node is created with the value stored in the value-attribute.

For example, the following array contains one atomic value and one object with a field called bar. Furthermore it contains two associative entries called bar with an atomic value, and foo with an object value.

var obj = ["Bar", {bar: "Bar"}];
obj["bar"] = "Bar";
obj["foo"] = {bar: "Bar"};

This array is represented by the following XML nodes.

<Array bar="Bar">
  <add value="Bar"/>
  <Object bar="Bar"/>
  <Object bar="Bar" as="foo"/>
</Array>

The Array node name is the name of the constructor. The additional as-attribute in the last child contains the key of the associative entry, whereas the second last child is part of the array sequence and does not have an as-attribute.

References

Objects may be represented as child nodes or attributes with ID values, which are used to lookup the object in a table within mxCodec. The isReference function is in charge of deciding if a specific field should be encoded as a reference or not. Its default implementation returns true if the fieldname is in idrefs, an array of strings that is used to configure the mxObjectCodec.

Using this approach, the mapping does not guarantee that the referenced object itself exists in the document. The fields that are encoded as references must be carefully chosen to make sure all referenced objects exist in the document, or may be resolved by some other means if necessary.

For example, in the case of the graph model all cells are stored in a tree whose root is referenced by the model’s root field. A tree is a structure that is well suited for an XML representation, however, the additional edges in the graph model have a reference to a source and target cell, which are also contained in the tree. To handle this case, the source and target cell of an edge are treated as references, whereas the children are treated as objects. Since all cells are contained in the tree and no edge references a source or target outside the tree, this setup makes sure all referenced objects are contained in the document.

In the case of a tree structure we must further avoid infinite recursion by ignoring the parent reference of each child. This is done by returning true in isExcluded, whose default implementation uses the array of excluded fieldnames passed to the mxObjectCodec constructor.

References are only used for cells in mxGraph. For defining other referencable object types, the codec must be able to work out the ID of an object. This is done by implementing mxCodec.reference. For decoding a reference, the XML node with the respective id-attribute is fetched from the document, decoded, and stored in a lookup table for later reference. For looking up external objects, mxCodec.lookup may be implemented.

Expressions

For decoding JavaScript expressions, the add-node may be used with a text content that contains the JavaScript expression. For example, the following creates a field called foo in the enclosing object and assigns it the value of mxConstants.ALIGN_LEFT.

<Object>
  <add as="foo">mxConstants.ALIGN_LEFT</add>
</Object>

The resulting object has a field called foo with the value “left”. Its XML representation looks as follows.

<Object foo="left"/>

This means the expression is evaluated at decoding time and the result of the evaluation is stored in the respective field. Valid expressions are all JavaScript expressions, including function definitions, which are mapped to functions on the resulting object.

Expressions are only evaluated if allowEval is true.

Summary

Functions
mxObjectCodec	Constructs a new codec for the specified template object.
Variables
allowEval	Static global switch that specifies if expressions in arrays are allowed.
template	Holds the template object associated with this codec.
exclude	Array containing the variable names that should be ignored by the codec.
idrefs	Array containing the variable names that should be turned into or converted from references.
mapping	Maps from from fieldnames to XML attribute names.
reverse	Maps from from XML attribute names to fieldnames.
Functions
getName	Returns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded.
cloneTemplate	Returns a new instance of the template for this codec.
getFieldName	Returns the fieldname for the given attributename.
getAttributeName	Returns the attributename for the given fieldname.
isExcluded	Returns true if the given attribute is to be ignored by the codec.
isReference	Returns true if the given fieldname is to be treated as a textual reference (ID).
encode	Encodes the specified object and returns a node representing then given object.
encodeObject	Encodes the value of each member in then given obj into the given node using encodeValue.
encodeValue	Converts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.
writeAttribute	Writes the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.
writePrimitiveAttribute	Writes the given value as an attribute of the given node.
writeComplexAttribute	Writes the given value as a child node of the given node.
convertAttributeToXml	Converts true to “1” and false to “0” is isBooleanAttribute returns true.
isBooleanAttribute	Returns true if the given object attribute is a boolean value.
convertAttributeFromXml	Converts booleans and numeric values to the respective types.
isNumericAttribute	Returns true if the given XML attribute is or should be a numeric value.
beforeEncode	Hook for subclassers to pre-process the object before encoding.
afterEncode	Hook for subclassers to post-process the node for the given object after encoding and return the post-processed node.
decode	Parses the given node into the object or returns a new object representing the given node.
decodeNode	Calls decodeAttributes and decodeChildren for the given node.
decodeAttributes	Decodes all attributes of the given node using decodeAttribute.
isIgnoredAttribute	Returns true if the given attribute should be ignored.
decodeAttribute	Reads the given attribute into the specified object.
decodeChildren	Decodes all children of the given node using decodeChild.
decodeChild	Reads the specified child into the given object.
getFieldTemplate	Returns the template instance for the given field.
addObjectValue	Sets the decoded child node as a value of the given object.
processInclude	Returns true if the given node is an include directive and executes the include by decoding the XML document.
beforeDecode	Hook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode.
afterDecode	Hook for subclassers to post-process the object after decoding.

Functions

mxObjectCodec

function mxObjectCodec( template,
exclude,
idrefs,
mapping )

Constructs a new codec for the specified template object. The variables in the optional exclude array are ignored by the codec. Variables in the optional idrefs array are turned into references in the XML. The optional mapping may be used to map from variable names to XML attributes. The argument is created as follows:

var mapping = new Object();
mapping['variableName'] = 'attribute-name';

Parameters

template	Prototypical instance of the object to be encoded/decoded.
exclude	Optional array of fieldnames to be ignored.
idrefs	Optional array of fieldnames to be converted to/from references.
mapping	Optional mapping from field- to attributenames.

Variables

allowEval

mxObjectCodec.allowEval

Static global switch that specifies if expressions in arrays are allowed. Default is false. NOTE: Enabling this carries a possible security risk.

template

mxObjectCodec.prototype.template

Holds the template object associated with this codec.

exclude

mxObjectCodec.prototype.exclude

Array containing the variable names that should be ignored by the codec.

idrefs

mxObjectCodec.prototype.idrefs

Array containing the variable names that should be turned into or converted from references. See mxCodec.getId and mxCodec.getObject.

mapping

mxObjectCodec.prototype.mapping

Maps from from fieldnames to XML attribute names.

reverse

mxObjectCodec.prototype.reverse

Maps from from XML attribute names to fieldnames.

Functions

getName

mxObjectCodec.prototype.getName = function()

Returns the name used for the nodenames and lookup of the codec when classes are encoded and nodes are decoded. For classes to work with this the codec registry automatically adds an alias for the classname if that is different than what this returns. The default implementation returns the classname of the template class.

cloneTemplate

mxObjectCodec.prototype.cloneTemplate = function()

Returns a new instance of the template for this codec.

getFieldName

mxObjectCodec.prototype.getFieldName = function( attributename )

Returns the fieldname for the given attributename. Looks up the value in the reverse mapping or returns the input if there is no reverse mapping for the given name.

getAttributeName

mxObjectCodec.prototype.getAttributeName = function( fieldname )

Returns the attributename for the given fieldname. Looks up the value in the mapping or returns the input if there is no mapping for the given name.

isExcluded

mxObjectCodec.prototype.isExcluded = function( obj,
attr,
value,
write )

Returns true if the given attribute is to be ignored by the codec. This implementation returns true if the given fieldname is in exclude or if the fieldname equals mxObjectIdentity.FIELD_NAME.

Parameters

obj	Object instance that contains the field.
attr	Fieldname of the field.
value	Value of the field.
write	Boolean indicating if the field is being encoded or decoded. Write is true if the field is being encoded, else it is being decoded.

isReference

mxObjectCodec.prototype.isReference = function( obj,
attr,
value,
write )

Returns true if the given fieldname is to be treated as a textual reference (ID). This implementation returns true if the given fieldname is in idrefs.

Parameters

obj	Object instance that contains the field.
attr	Fieldname of the field.
value	Value of the field.
write	Boolean indicating if the field is being encoded or decoded. Write is true if the field is being encoded, else it is being decoded.

encode

mxObjectCodec.prototype.encode = function( enc,
obj )

Encodes the specified object and returns a node representing then given object. Calls beforeEncode after creating the node and afterEncode with the resulting node after processing.

Enc is a reference to the calling encoder. It is used to encode complex objects and create references.

This implementation encodes all variables of an object according to the following rules:

If the variable name is in exclude then it is ignored.
If the variable name is in idrefs then mxCodec.getId is used to replace the object with its ID.
The variable name is mapped using mapping.
If obj is an array and the variable name is numeric (ie. an index) then it is not encoded.
If the value is an object, then the codec is used to create a child node with the variable name encoded into the “as” attribute.
Else, if <encodeDefaults> is true or the value differs from the template value, then ...
... if obj is not an array, then the value is mapped to an attribute.
... else if obj is an array, the value is mapped to an add child with a value attribute or a text child node, if the value is a function.

If no ID exists for a variable in idrefs or if an object cannot be encoded, a warning is issued using mxLog.warn.

Returns the resulting XML node that represents the given object.

Parameters

enc	mxCodec that controls the encoding process.
obj	Object to be encoded.

encodeObject

mxObjectCodec.prototype.encodeObject = function( enc,
obj,
node )

Encodes the value of each member in then given obj into the given node using encodeValue.

Parameters

enc	mxCodec that controls the encoding process.
obj	Object to be encoded.
node	XML node that contains the encoded object.

encodeValue

mxObjectCodec.prototype.encodeValue = function( enc,
obj,
name,
value,
node )

Converts the given value according to the mappings and id-refs in this codec and uses writeAttribute to write the attribute into the given node.

Parameters

enc	mxCodec that controls the encoding process.
obj	Object whose property is going to be encoded.
name	XML node that contains the encoded object.
value	Value of the property to be encoded.
node	XML node that contains the encoded object.

writeAttribute

mxObjectCodec.prototype.writeAttribute = function( enc,
obj,
name,
value,
node )

Writes the given value into node using writePrimitiveAttribute or writeComplexAttribute depending on the type of the value.

writePrimitiveAttribute

mxObjectCodec.prototype.writePrimitiveAttribute = function( enc,
obj,
name,
value,
node )

Writes the given value as an attribute of the given node.

writeComplexAttribute

mxObjectCodec.prototype.writeComplexAttribute = function( enc,
obj,
name,
value,
node )

Writes the given value as a child node of the given node.

convertAttributeToXml

mxObjectCodec.prototype.convertAttributeToXml = function( enc,
obj,
name,
value )

Converts true to “1” and false to “0” is isBooleanAttribute returns true. All other values are not converted.

Parameters

enc	mxCodec that controls the encoding process.
obj	Objec to convert the attribute for.
name	Name of the attribute to be converted.
value	Value to be converted.

isBooleanAttribute

mxObjectCodec.prototype.isBooleanAttribute = function( enc,
obj,
name,
value )

Returns true if the given object attribute is a boolean value.

Parameters

enc	mxCodec that controls the encoding process.
obj	Objec to convert the attribute for.
name	Name of the attribute to be converted.
value	Value of the attribute to be converted.

convertAttributeFromXml

mxObjectCodec.prototype.convertAttributeFromXml = function( dec,
attr,
obj )

Converts booleans and numeric values to the respective types. Values are numeric if isNumericAttribute returns true.

Parameters

dec	mxCodec that controls the decoding process.
attr	XML attribute to be converted.
obj	Objec to convert the attribute for.

isNumericAttribute

mxObjectCodec.prototype.isNumericAttribute = function( dec,
attr,
obj )

Returns true if the given XML attribute is or should be a numeric value.

Parameters

dec	mxCodec that controls the decoding process.
attr	XML attribute to be converted.
obj	Objec to convert the attribute for.

beforeEncode

mxObjectCodec.prototype.beforeEncode = function( enc,
obj,
node )

Hook for subclassers to pre-process the object before encoding. This returns the input object. The return value of this function is used in encode to perform the default encoding into the given node.

Parameters

enc	mxCodec that controls the encoding process.
obj	Object to be encoded.
node	XML node to encode the object into.

afterEncode

mxObjectCodec.prototype.afterEncode = function( enc,
obj,
node )

Hook for subclassers to post-process the node for the given object after encoding and return the post-processed node. This implementation returns the input node. The return value of this method is returned to the encoder from encode.

Parameters

enc	mxCodec that controls the encoding process.
obj	Object to be encoded.
node	XML node that represents the default encoding.

decode

mxObjectCodec.prototype.decode = function( dec,
node,
into )

Parses the given node into the object or returns a new object representing the given node.

Dec is a reference to the calling decoder. It is used to decode complex objects and resolve references.

If a node has an id attribute then the object cache is checked for the object. If the object is not yet in the cache then it is constructed using the constructor of template and cached in mxCodec.objects.

This implementation decodes all attributes and childs of a node according to the following rules:

If the variable name is in exclude or if the attribute name is “id” or “as” then it is ignored.
If the variable name is in idrefs then mxCodec.getObject is used to replace the reference with an object.
The variable name is mapped using a reverse mapping.
If the value has a child node, then the codec is used to create a child object with the variable name taken from the “as” attribute.
If the object is an array and the variable name is empty then the value or child object is appended to the array.
If an add child has no value or the object is not an array then the child text content is evaluated using mxUtils.eval.

For add nodes where the object is not an array and the variable name is defined, the default mechanism is used, allowing to override/add methods as follows:

<Object>
  <add as="hello"><![CDATA[
    function(arg1) {
      mxUtils.alert('Hello '+arg1);
    }
  ]]></add>
</Object>

If no object exists for an ID in idrefs a warning is issued using mxLog.warn.

Returns the resulting object that represents the given XML node or the object given to the method as the into parameter.

Parameters

dec	mxCodec that controls the decoding process.
node	XML node to be decoded.
into	Optional objec to encode the node into.

decodeNode

mxObjectCodec.prototype.decodeNode = function( dec,
node,
obj )

Calls decodeAttributes and decodeChildren for the given node.

Parameters

dec	mxCodec that controls the decoding process.
node	XML node to be decoded.
obj	Objec to encode the node into.

decodeAttributes

mxObjectCodec.prototype.decodeAttributes = function( dec,
node,
obj )

Decodes all attributes of the given node using decodeAttribute.

Parameters

dec	mxCodec that controls the decoding process.
node	XML node to be decoded.
obj	Objec to encode the node into.

isIgnoredAttribute

mxObjectCodec.prototype.isIgnoredAttribute = function( dec,
attr,
obj )

Returns true if the given attribute should be ignored. This implementation returns true if the attribute name is “as” or “id”.

Parameters

dec	mxCodec that controls the decoding process.
attr	XML attribute to be decoded.
obj	Objec to encode the attribute into.

decodeAttribute

mxObjectCodec.prototype.decodeAttribute = function( dec,
attr,
obj )

Reads the given attribute into the specified object.

Parameters

dec	mxCodec that controls the decoding process.
attr	XML attribute to be decoded.
obj	Objec to encode the attribute into.

decodeChildren

mxObjectCodec.prototype.decodeChildren = function( dec,
node,
obj )

Decodes all children of the given node using decodeChild.

Parameters

dec	mxCodec that controls the decoding process.
node	XML node to be decoded.
obj	Objec to encode the node into.

decodeChild

mxObjectCodec.prototype.decodeChild = function( dec,
child,
obj )

Reads the specified child into the given object.

Parameters

dec	mxCodec that controls the decoding process.
child	XML child element to be decoded.
obj	Objec to encode the node into.

getFieldTemplate

mxObjectCodec.prototype.getFieldTemplate = function( obj,
fieldname,
child )

Returns the template instance for the given field. This returns the value of the field, null if the value is an array or an empty collection if the value is a collection. The value is then used to populate the field for a new instance. For strongly typed languages it may be required to override this to return the correct collection instance based on the encoded child.

addObjectValue

mxObjectCodec.prototype.addObjectValue = function( obj,
fieldname,
value,
template )

Sets the decoded child node as a value of the given object. If the object is a map, then the value is added with the given fieldname as a key. If the fieldname is not empty, then setFieldValue is called or else, if the object is a collection, the value is added to the collection. For strongly typed languages it may be required to override this with the correct code to add an entry to an object.

processInclude

mxObjectCodec.prototype.processInclude = function( dec,
node,
into )

Returns true if the given node is an include directive and executes the include by decoding the XML document. Returns false if the given node is not an include directive.

Parameters

dec	mxCodec that controls the encoding/decoding process.
node	XML node to be checked.
into	Optional object to pass-thru to the codec.

beforeDecode

mxObjectCodec.prototype.beforeDecode = function( dec,
node,
obj )

Hook for subclassers to pre-process the node for the specified object and return the node to be used for further processing by decode. The object is created based on the template in the calling method and is never null. This implementation returns the input node. The return value of this function is used in decode to perform the default decoding into the given object.

Parameters

dec	mxCodec that controls the decoding process.
node	XML node to be decoded.
obj	Object to encode the node into.

afterDecode

mxObjectCodec.prototype.afterDecode = function( dec,
node,
obj )

Hook for subclassers to post-process the object after decoding. This implementation returns the given object without any changes. The return value of this method is returned to the decoder from decode.

Parameters

enc	mxCodec that controls the encoding process.
node	XML node to be decoded.
obj	Object that represents the default decoding.

mxCellCodec

Codec for mxCells. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

children
edges
overlays
mxTransient

Reference Fields

parent
source
target

Transient fields can be added using the following code

mxCodecRegistry.getCodec(mxCell).exclude.push(‘name_of_field’);

To subclass mxCell, replace the template and add an alias as follows.

function CustomCell(value, geometry, style)
{
  mxCell.apply(this, arguments);
}

mxUtils.extend(CustomCell, mxCell);

mxCodecRegistry.getCodec(mxCell).template = new CustomCell();
mxCodecRegistry.addAlias('CustomCell', 'mxCell');

Summary

Functions
isCellCodec	Returns true since this is a cell codec.
isExcluded	Excludes user objects that are XML nodes.
afterEncode	Encodes an mxCell and wraps the XML up inside the XML of the user object (inversion).
beforeDecode	Decodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).

Functions

isCellCodec

codec.isCellCodec = function()

Returns true since this is a cell codec.

isExcluded

codec.isExcluded = function( obj,
attr,
value,
isWrite )

Excludes user objects that are XML nodes.

afterEncode

codec.afterEncode = function( enc,
obj,
node )

Encodes an mxCell and wraps the XML up inside the XML of the user object (inversion).

beforeDecode

codec.beforeDecode = function( dec,
node,
obj )

Decodes an mxCell and uses the enclosing XML node as the user object for the cell (inversion).

mxModelCodec

Codec for mxGraphModels. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Summary

Functions
encodeObject	Encodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec.
decodeChild	Overrides decode child to handle special child nodes.
decodeRoot	Reads the cells into the graph model.

Functions

encodeObject

codec.encodeObject = function( enc,
obj,
node )

Encodes the given mxGraphModel by writing a (flat) XML sequence of cell nodes as produced by the mxCellCodec. The sequence is wrapped-up in a node with the name root.

decodeChild

codec.decodeChild = function( dec,
child,
obj )

Overrides decode child to handle special child nodes.

decodeRoot

codec.decodeRoot = function( dec,
root,
model )

Reads the cells into the graph model. All cells are children of the root element in the node.

mxRootChangeCodec

Codec for mxRootChanges. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

model
previous
root

Summary

Functions
onEncode	Encodes the child recursively.
beforeDecode	Decodes the optional children as cells using the respective decoder.
afterDecode	Restores the state by assigning the previous value.

Functions

onEncode

Encodes the child recursively.

beforeDecode

codec.beforeDecode = function( dec,
node,
obj )

Decodes the optional children as cells using the respective decoder.

afterDecode

codec.afterDecode = function( dec,
node,
obj )

Restores the state by assigning the previous value.

mxChildChangeCodec

Codec for mxChildChanges. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

model
previous
previousIndex
child

Reference Fields

parent

Summary

Functions
isReference	Returns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.
isExcluded	Excludes references to parent or previous if not in the model.
afterEncode	Encodes the child recusively and adds the result to the given node.
beforeDecode	Decodes the any child nodes as using the respective codec from the registry.
afterDecode	Restores object state in the child change.

Functions

isReference

codec.isReference = function( obj,
attr,
value,
isWrite )

Returns true for the child attribute if the child cell had a previous parent or if we’re reading the child as an attribute rather than a child node, in which case it’s always a reference.

isExcluded

codec.isExcluded = function( obj,
attr,
value,
write )

Excludes references to parent or previous if not in the model.

afterEncode

codec.afterEncode = function( enc,
obj,
node )

Encodes the child recusively and adds the result to the given node.

beforeDecode

codec.beforeDecode = function( dec,
node,
obj )

Decodes the any child nodes as using the respective codec from the registry.

afterDecode

codec.afterDecode = function( dec,
node,
obj )

Restores object state in the child change.

mxTerminalChangeCodec

Codec for mxTerminalChanges. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

model
previous

Reference Fields

cell
terminal

Summary

Functions
afterDecode	Restores the state by assigning the previous value.

Functions

afterDecode

codec.afterDecode = function( dec,
node,
obj )

Restores the state by assigning the previous value.

mxGenericChangeCodec

Codec for mxValueChanges, mxStyleChanges, mxGeometryChanges, mxCollapseChanges and mxVisibleChanges. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

model
previous

Reference Fields

cell

Summary

Functions
mxGenericChangeCodec	Factory function that creates a mxObjectCodec for the specified change and fieldname.
afterDecode	Restores the state by assigning the previous value.

Functions

mxGenericChangeCodec

var mxGenericChangeCodec = function( obj,
variable )

Factory function that creates a mxObjectCodec for the specified change and fieldname.

Parameters

obj	An instance of the change object.
variable	The fieldname for the change data.

afterDecode

codec.afterDecode = function( dec,
node,
obj )

Restores the state by assigning the previous value.

mxGraphCodec

Codec for mxGraphs. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

graphListeners
eventListeners
view
container
cellRenderer
editor
selection

mxGraphViewCodec

Custom encoder for mxGraphViews. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry. This codec only writes views into a XML format that can be used to create an image for the graph, that is, it contains absolute coordinates with computed perimeters, edge styles and cell styles.

Summary

Functions
encode	Encodes the given mxGraphView using encodeCell starting at the model’s root.
encodeCell	Recursively encodes the specifed cell.

Functions

encode

codec.encode = function( enc,
view )

Encodes the given mxGraphView using encodeCell starting at the model’s root. This returns the top-level graph node of the recursive encoding.

encodeCell

codec.encodeCell = function( enc,
view,
cell )

Recursively encodes the specifed cell. Uses layer as the default nodename. If the cell’s parent is null, then graph is used for the nodename. If mxGraphModel.isEdge returns true for the cell, then edge is used for the nodename, else if mxGraphModel.isVertex returns true for the cell, then vertex is used for the nodename.

mxGraph.getLabel is used to create the label attribute for the cell. For graph nodes and vertices the bounds are encoded into x, y, width and height. For edges the points are encoded into a points attribute as a space-separated list of comma-separated coordinate pairs (eg. x0,y0 x1,y1 ... xn,yn). All values from the cell style are added as attribute values to the node.

mxStylesheetCodec

Codec for mxStylesheets. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Summary

Functions
encode	Encodes a stylesheet.
getStringValue	Returns the string for encoding the given value.
decode	Reads a sequence of the following child nodes and attributes:
Variables
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content.

Functions

encode

codec.encode = function( enc,
obj )

Encodes a stylesheet. See decode for a description of the format.

getStringValue

codec.getStringValue = function( key,
value )

Returns the string for encoding the given value.

decode

codec.decode = function( dec,
node,
into )

Reads a sequence of the following child nodes and attributes:

Child Nodes

add	Adds a new style.

Attributes

as	Name of the style.
extend	Name of the style to inherit from.

Each node contains another sequence of add and remove nodes with the following attributes:

as	Name of the style (see mxConstants).
value	Value for the style.

Instead of the value-attribute, one can put Javascript expressions into the node as follows if mxStylesheetCodec.allowEval is true: <add as=”perimeter”>mxPerimeter.RectanglePerimeter</add>

A remove node will remove the entry with the name given in the as-attribute from the style.

Example

<mxStylesheet as="stylesheet">
  <add as="text">
    <add as="fontSize" value="12"/>
  </add>
  <add as="defaultVertex" extend="text">
    <add as="shape" value="rectangle"/>
  </add>
</mxStylesheet>

Variables

allowEval

mxStylesheetCodec.allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content. Default is true. Set this to false if stylesheets may contain user input.

mxDefaultKeyHandlerCodec

Custom codec for configuring mxDefaultKeyHandlers. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry. This codec only reads configuration data for existing key handlers, it does not encode or create key handlers.

Summary

Functions
encode	Returns null.
decode	Reads a sequence of the following child nodes and attributes:

Functions

encode

codec.encode = function( enc,
obj )

Returns null.

decode

codec.decode = function( dec,
node,
into )

Reads a sequence of the following child nodes and attributes:

Child Nodes

add	Binds a keystroke to an actionname.

Attributes

as	Keycode.
action	Actionname to execute in editor.
control	Optional boolean indicating if the control key must be pressed.

Example

<mxDefaultKeyHandler as="keyHandler">
  <add as="88" control="true" action="cut"/>
  <add as="67" control="true" action="copy"/>
  <add as="86" control="true" action="paste"/>
</mxDefaultKeyHandler>

The keycodes are for the x, c and v keys.

mxDefaultToolbarCodec

Custom codec for configuring mxDefaultToolbars. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry. This codec only reads configuration data for existing toolbars handlers, it does not encode or create toolbars.

Summary

Functions
encode	Returns null.
decode	Reads a sequence of the following child nodes and attributes:
Variables
allowEval	Static global switch that specifies if the use of eval is allowed for evaluating text content.

Functions

encode

codec.encode = function( enc,
obj )

Returns null.

decode

codec.decode = function( dec,
node,
into )

Reads a sequence of the following child nodes and attributes:

Child Nodes

add	Adds a new item to the toolbar. See below for attributes.
separator	Adds a vertical separator. No attributes.
hr	Adds a horizontal separator. No attributes.
br	Adds a linefeed. No attributes.

Attributes

as	Resource key for the label.
action	Name of the action to execute in enclosing editor.
mode	Modename (see below).
template	Template name for cell insertion.
style	Optional style to override the template style.
icon	Icon (relative/absolute URL).
pressedIcon	Optional icon for pressed state (relative/absolute URL).
id	Optional ID to be used for the created DOM element.
toggle	Optional 0 or 1 to disable toggling of the element. Default is 1 (true).

The action, mode and template attributes are mutually exclusive. The style can only be used with the template attribute. The add node may contain another sequence of add nodes with as and action attributes to create a combo box in the toolbar. If the icon is specified then a list of the child node is expected to have its template attribute set and the action is ignored instead.

Nodes with a specified template may define a function to be used for inserting the cloned template into the graph. Here is an example of such a node:

<add as="Swimlane" template="swimlane" icon="images/swimlane.gif"><![CDATA[
  function (editor, cell, evt, targetCell)
  {
    var pt = mxUtils.convertPoint(
      editor.graph.container, mxEvent.getClientX(evt),
        mxEvent.getClientY(evt));
    return editor.addVertex(targetCell, cell, pt.x, pt.y);
  }
]]></add>

In the above function, editor is the enclosing mxEditor instance, cell is the clone of the template, evt is the mouse event that represents the drop and targetCell is the cell under the mousepointer where the drop occurred. The targetCell is retrieved using mxGraph.getCellAt.

Futhermore, nodes with the mode attribute may define a function to be executed upon selection of the respective toolbar icon. In the example below, the default edge style is set when this specific connect-mode is activated:

<add as="connect" mode="connect"><![CDATA[
  function (editor)
  {
    if (editor.defaultEdge != null)
    {
      editor.defaultEdge.style = 'straightEdge';
    }
  }
]]></add>

Both functions require mxDefaultToolbarCodec.allowEval to be set to true.

Modes

select	Left mouse button used for rubberband- & cell-selection.
connect	Allows connecting vertices by inserting new edges.
pan	Disables selection and switches to panning on the left button.

Example

To add items to the toolbar

<mxDefaultToolbar as="toolbar">
  <add as="save" action="save" icon="images/save.gif"/>
  <br/><hr/>
  <add as="select" mode="select" icon="images/select.gif"/>
  <add as="connect" mode="connect" icon="images/connect.gif"/>
</mxDefaultToolbar>

Variables

allowEval

mxDefaultToolbarCodec.allowEval

Static global switch that specifies if the use of eval is allowed for evaluating text content. Default is true. Set this to false if stylesheets may contain user input

mxDefaultPopupMenuCodec

Custom codec for configuring mxDefaultPopupMenus. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry. This codec only reads configuration data for existing popup menus, it does not encode or create menus. Note that this codec only passes the configuration node to the popup menu, which uses the config to dynamically create menus. See mxDefaultPopupMenu.createMenu.

Summary

Functions
encode	Returns null.
decode	Uses the given node as the config for mxDefaultPopupMenu.

Functions

encode

codec.encode = function( enc,
obj )

Returns null.

decode

codec.decode = function( dec,
node,
into )

Uses the given node as the config for mxDefaultPopupMenu.

mxEditorCodec

Codec for mxEditors. This class is created and registered dynamically at load time and used implicitely via mxCodec and the mxCodecRegistry.

Transient Fields

modified
lastSnapshot
ignoredChanges
undoManager
graphContainer
toolbarContainer

Summary

Functions
beforeDecode	Decodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:
decodeChild	Overrides decode child to handle special child nodes.
decodeTemplates	Decodes the cells from the given node as templates.
decodeTemplates	Decodes the cells from the given node as templates.

Functions

beforeDecode

Decodes the ui-part of the configuration node by reading a sequence of the following child nodes and attributes and passes the control to the default decoding mechanism:

Child Nodes

stylesheet	Adds a CSS stylesheet to the document.
resource	Adds the basename of a resource bundle.
add	Creates or configures a known UI element.

These elements may appear in any order given that the graph UI element is added before the toolbar element (see Known Keys).

Attributes

as	Key for the UI element (see below).
element	ID for the element in the document.
style	CSS style to be used for the element or window.
x	X coordinate for the new window.
y	Y coordinate for the new window.
width	Width for the new window.
height	Optional height for the new window.
name	Name of the stylesheet (absolute/relative URL).
basename	Basename of the resource bundle (see mxResources).

The x, y, width and height attributes are used to create a new mxWindow if the element attribute is not specified in an add node. The name and basename are only used in the stylesheet and resource nodes, respectively.

Known Keys

graph	Main graph element (see mxEditor.setGraphContainer).
title	Title element (see mxEditor.setTitleContainer).
toolbar	Toolbar element (see mxEditor.setToolbarContainer).
status	Status bar element (see mxEditor.setStatusContainer).

Example

<ui>
  <stylesheet name="css/process.css"/>
  <resource basename="resources/app"/>
  <add as="graph" element="graph"
    style="left:70px;right:20px;top:20px;bottom:40px"/>
  <add as="status" element="status"/>
  <add as="toolbar" x="10" y="20" width="54"/>
</ui>

decodeChild

codec.decodeChild = function( dec,
child,
obj )

Overrides decode child to handle special child nodes.

decodeTemplates

Decodes the cells from the given node as templates.

decodeTemplates

codec.decodeTemplates = function( dec,
node,
editor )

Decodes the cells from the given node as templates.